使用按钮作为布尔字段的Django模板

Question

我有一个有许多布尔字段的首选项页面。我创建了一个UpdateView，当我在我的模板中使用{{ form.as_p }}时，它可以工作，但我试图为每个选项创建单独的按钮，而不是复选框。我找不到一个方法让它在我的模板中工作。

models.py:

class Preference(models.Model):
user = models.OneToOneField("User", on_delete=models.SET_NULL, null=True)
option1= models.BooleanField(default=False)
option2= models.BooleanField(default=False)
option3= models.BooleanField(default=False)
option4= models.BooleanField(default=False)

views.py:

class preferencesview(UpdateView):
model = Preference
form_class = PreferenceForm
success_url = reverse_lazy("profiles:preferences")

forms.py:

class PreferenceForm (forms.ModelForm):
class Meta:
model = Preference
exclude = ['user']

我希望每个选项都有单独的按钮和一个提交按钮来保存更改。如果你有任何文档或教程，请告诉我。

Answer 1

有很多方法可以做到这一点。但是没有现成的解决方案。我的例子是使用bootstrap css和一点jquery/js:

在表单类定义中将字段小部件更改为HiddenInput，如:

class PreferenceForm (forms.ModelForm):
class Meta:
model = Preference
exclude = ['user']
widgets = {'option1': forms.HiddenInput,
'option2': forms.HiddenInput,
}

end so on

然后在你的模板中循环遍历表单的字段，并基于value渲染button的类(btn-success/btn-danger):

<form id="myform">
{% for field in form %}
<button type="button" class="btn {% if field.value %} btn-success{% else %}btn-danger{% endif %}"
name="{{ field.name }}">
{{ field.name }}</button>
{{ field }}
{% endfor %}
</form>

不要忘记添加{{field}}本身，

现在用js观察点击按钮在#myform和基于hasClass改变按钮的类和输入的值:

<script>
$('#myform button').on('click', function () {
let nameof = $(this).attr('name');

if ($(this).hasClass('btn-success')){
$(this).removeClass('btn-success');
$(this).addClass('btn-danger');
$('#myform input[name='+nameof+']').val('False');
} else {
$(this).removeClass('btn-danger');
$(this).addClass('btn-success');
$('#myform input[name='+nameof+']').val('True');
}
});
</script>

。不要忘记在表单中添加保存按钮。这只是众多例子中的一个。