Использовать кнопки (не радиокнопки) для поля выбора в Django?

Question

У меня есть форма Django:

class Form0(forms.Form):
    # Do you agree to the terms?
    CHOICES = [ (1,'Yes'), (0, 'No')]
    response = forms.ChoiceField(widget=forms.RadioSelect,choices=CHOICES)

Мои просмотры:

def home(request):
    '''
    entry
    '''
    if request.method == 'POST':
        form = forms.Form0(request.POST)
        if form.is_valid():
            assesment, created = models.Assessment.objects.get_or_create(
                session_id=request.session.session_key,
                defaults={'data': {}})
            assesment.data.update({'Terms': form.cleaned_data['response']})
            assesment.save()
            print(form.cleaned_data)
            if form.cleaned_data['response'] == '1':
                return redirect(reverse("question1"))
            else:
                return redirect("conclusion")

            resp =  HttpResponse('ok')
            return resp
    else:
        form = forms.Form0()

    resp = render(request, 'coreapp/index.html', {'form': form})
    if not request.session.session_key:
        request.session.save()
    return resp

Она отображается в моем шаблоне HTML. Я сделал скрипт для включения отправки формы при нажатии на переключатель, который отлично работает:

<form method="POST">
  {{ form.as_table }} {% csrf_token %}
  <script>
    $("input[type=radio]").on("change", function () {
      $(this).closest("form").submit();
    });
  </script>
</form>

Это выглядит так:

Проблема

Можно ли отобразить радиоселекты «Да» и «Нет» как обычные кнопки? Например, с помощью bootstrap кнопок, таких как:

<button class="btn btn-primary" type="submit">Yes</button>
<button class="btn btn-primary" type="submit">No</button>

Answer 1

Да, вы можете использовать bootstrap Checkbox and Radio Buttons:

https://getbootstrap.com/docs/4.0/components/buttons/#checkbox и радио-кнопки

$('input[type=radio]').on('change', function (e) {
  $(this).closest('form').submit()
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<form>
  <div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-primary active">
      <input type="radio" name="options" id="option1" autocomplete="off" checked> Yes
    </label>
    <label class="btn btn-primary">
      <input type="radio" name="options" id="option2" autocomplete="off"> No
    </label>
  </div>

  <br />
  <br />

  <div class="btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-primary active">
      <input type="radio" name="options2" id="optionA" autocomplete="off" checked> Yes
    </label>
    <label class="btn btn-primary">
      <input type="radio" name="options2" id="optionB" autocomplete="off"> No
    </label>
  </div>

  <br />
  <br />

  <div class="btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-primary">
      <input type="radio" name="options2" id="optionA" autocomplete="off"> Yes
    </label>
    <label class="btn btn-primary">
      <input type="radio" name="options2" id="optionB" autocomplete="off"> No
    </label>
  </div>
</form>


<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

Answer 2

Мне удалось сделать это, создав для шаблона l oop и добавив стилизацию в новый класс myradio:

<form method="POST">
  {% csrf_token %}
    {% if form.response %} 
      {% for radio in form.response %}
        <div class="myradio">
          {{ radio }}
        </div>
      {% endfor %}

  <script>
    $("input[type=radio]").on("change", function () {
      $(this).closest("form").submit();
    });
  </script>
</form>