使用引导开关或类似的方法将Django Radio输入改为切换按钮

Change Django Radio input into toggle button using bootstrap switch or similar

本文关键字：输入 Radio Django 按钮 方法 开关      更新时间：2023-09-26

models.py 

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

最初我计划创建一个AvailabilityForm对象，并将输入作为RadioSelect小部件。但是我想把单选按钮的外观改成一个拨动开关。我正在考虑使用https://github.com/nostalgiaz/bootstrap-switch，但我不确定如何使用django模板合并。下面是我的问题:1)我可以扩展基本的django小部件来获得我想要的效果(切换开关)还是更容易编写html并使用request.GET获取输入?2)我想要一个选择(或检查，如果使用复选框代替)已经根据数据库中的值。我该怎么做呢?(对我的js技能不自信)

感谢大家提前提供的帮助

如果我检查网站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();

为要显示为引导开关的复选框

相关文章：