Проблема создания формы выбора радио с классами django и bootstrap

Question

Я пытаюсь создать форму с выбором радиокнопок с помощью Django. Веб-сайт разработан в начальной загрузке 4, и по какой-то причине кнопки исчезают, когда применяется класс ввода пользовательского элемента управления.

Я начал со статического шаблона, который прекрасно отрисовывается. Код для этих групп кнопок следующий:

<div class="form-group row">
    <div class="col-sm-2">Sexo</div>
    <div class="col-sm-10">
        <div class="custom-control custom-radio">
            <input type="radio" class="custom-control-input" id="sexo1" name="sexoRadios">
            <label class="custom-control-label" for="sexo1">Mujer</label>
        </div>
        <div class="custom-control custom-radio">
            <input type="radio" class="custom-control-input" id="sexo2" name="sexoRadios">
            <label class="custom-control-label" for="sexo2">Hombre</label>
        </div>
    </div>
</div>

Чтобы создать форму в Django, я добавил следующие строки в файл forms.py:

sexo_choices=[('hombre','Hombre'),
            ('mujer','Mujer')]
sexo = forms.ChoiceField(choices=sexo_choices, widget=forms.RadioSelect(
        attrs={'class':'custom-control-input'}
    ))

По какой-то причине радио-кнопки исчезают. Если я проанализирую HTML-код, созданный django, он будет похож на статический веб.

<div class="form-group row">
    <div class="col-sm-2">Sexo</div>
    <div class="col-sm-10">
      <div class="custom-control custom-radio">
          <label for="id_sexo_0"><input type="radio" name="sexo" value="hombre" class="custom-control-input" id="id_sexo_0" required>Hombre</label>
      </div>
      <div class="custom-control custom-radio">
          <label for="id_sexo_1"><input type="radio" name="sexo" value="mujer" class="custom-control-input" id="id_sexo_1" required>Mujer</label>
      </div>
    </div>
</div>

Однако, когда я проверяю объект с помощью Google Chrome, я замечаю, что тег ввода имеет следующие атрибуты CSS:

.custom-control-input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

Кажется, проблема в классе тега label. Есть ли способ присвоить класс метке?

Большое спасибо.

Answer 1

Мне удалось решить мою проблему. Вот как я оставил шаблон HTML:

<div class="form-group row">
    <div class="col-sm-2">Sexo</div>
    <div class="col-sm-10">
    {% for radio in form.sexo %}
        <div class="custom-control custom-radio">
            {{ radio.tag }}
            <label class="custom-control-label" for="{{ radio.id_for_label }}">{{ radio.choice_label }}</label>
        </div>
    {% endfor %}
    </div>
</div>

В любом случае, спасибо. Привет

Answer 2

Может быть, кто-то поможет: Как настроить флажок и радио в Django, используя Bootstrap

template.html

<!-- radio -->
<div class="form-group">
    {{ form.field_name.label_tag }}
    {% for pk, choice in form.field_name.field.widget.choices %}
    <div class="custom-control custom-radio custom-control-inline">
        <input id="id_{{form.field_name.name}}_{{ forloop.counter0 }}" name="{{form.field_name.name}}" type="{{form.field_name.field.widget.input_type}}" value="{{pk}}" class="custom-control-input"
         {% ifequal form.field_name.data pk.0 %}
           checked="checked"
         {% endifequal %}/>
        <label for="id_{{form.field_name.name}}_{{ forloop.counter0 }}" class="custom-control-label">{{ choice }}</label>
    </div>
    {% endfor %}
</div>

<!-- checkbox -->
<div class="form-group">
    {{ form.field_name.label_tag }}
    {% for pk, choice in form.field_name.field.widget.choices %}
    <div class="custom-control custom-checkbox custom-control-inline">
        <input id="id_{{form.field_name.name}}_{{ forloop.counter0 }}" name="{{form.field_name.name}}" type="{{form.field_name.field.widget.input_type}}" value="{{pk}}" class="custom-control-input"
         {% ifequal form.field_name.data pk.0 %}
           checked="checked"
         {% endifequal %}/>
        <label for="id_{{form.field_name.name}}_{{ forloop.counter0 }}" class="custom-control-label">{{ choice }}</label>
    </div>
    {% endfor %}
</div>