在 Django 中为 Choicefield 使用按钮（不是单选按钮）？

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>

看起来像这样：

问题

是否可以将“是”和“否”单选按钮显示为普通按钮？例如。使用引导按钮，例如：

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

Answer 1

我设法通过在我的模板中创建一个 for 循环并向新的“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>

Answer 2

是的，您可以使用引导程序Checkbox and Radio Buttons：

https://getbootstrap.com/docs/4.0/components/buttons/#checkbox-and-radio-buttons

$('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">