将Django单选输入改为使用Bootstrap开关的切换按钮

Question

models.py

class Listener(models.Model):
    # other columns
    availability = models.BooleanField(default=False)

最开始我打算创建一个 AvailabilityForm 对象，并把输入设置为单选按钮（RadioSelect）。但是我想把单选按钮的样子改成一个切换开关（toggle switch）。我在考虑使用 这个链接 上的工具，但我不太确定怎么在 Django 模板中使用它。所以我有几个问题： 1) 我可以扩展基本的 Django 小部件（widgets）来实现我想要的效果（切换开关）吗？还是说直接写 HTML 用 request.GET 获取输入会更简单？ 2) 我希望根据数据库中的值，默认选中一个选项（如果用复选框的话就是默认勾选）。我该怎么做呢？（我对我的 JavaScript 技能不太自信）

谢谢大家的帮助！

Answer 1

如果我查看这个网站 http://www.bootstrap-switch.org/，我看到以下内容：

<link href="bootstrap.css" rel="stylesheet">
<link href="bootstrap-switch.css" rel="stylesheet">
<script src="jquery.js"></script>
<script src="bootstrap-switch.js"></script>

这里有一些小的JavaScript和CSS代码，你需要把它们放到你的模板里。不过我不太推荐他们的设置方式，建议把JavaScript文件放到页面的底部。

关于复选框：

<input type="checkbox" name="my-checkbox" checked>

其实没什么特别的，你的复选框可以是：

class ListenerForm(forms.ModelForm):
    # other columns
    availability = forms.CheckboxInput()  # Or any other type of checkbox field

在你的模板中用 {{ form.as_p }} 来渲染它。

最后但同样重要的是：

$("[name='my-checkbox']").bootstrapSwitch();

对于你想要显示为Bootstrap Switch的复选框。