Шаблоны Django с использованием кнопок для булевых полей

У меня есть страница предпочтений, которая имеет много булевых полей. Я создал 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']

Я хочу иметь отдельные кнопки для каждой опции и кнопку отправки для сохранения изменений. Пожалуйста, дайте мне знать, если у вас есть какая-либо документация или учебники.

Спасибо!

Существует так много способов, которыми вы можете это сделать. Но не существует готового решения. Мой пример - это bootstrap css и немного jquery/js:

В определении класса формы измените виджеты полей на HiddenInput следующим образом:

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

закончить так далее

затем в вашем шаблоне переберите поля формы и на основе значения выведите класс кнопки (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>

не забудьте добавить само {{ поле }},

Теперь с помощью js следите за нажатием на кнопки внутри #myform и на основе hasClass меняйте класс кнопки и значение input:

<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>

Вот и все. Не забудьте добавить в форму кнопку сохранения. Это лишь один из многих примеров того, как это можно сделать.

Вернуться на верх