Django (HTML) - 模板中的可点击标签（不工作）

Question

我正在处理一个 Django 项目，我希望在出现此问题时使用一些自定义的复选框表单。 两个代码块完全相同，但使用不同的形式。当第一个示例标签是可点击的（所以我可以隐藏单选按钮）时，问题就出现了，但第二个没有按预期工作，用户必须单击单选按钮，如果我隐藏它，整个标签将变得无用。

正常工作：

<form action="" class="form-group" method="POST">
<div class="modal-body">

    <div class="row">
        <div class="col">
            <ul>
                {% csrf_token %}
                <fieldset >
                    
                    {% for radio in form_emp.producto %}
                    <li style="list-style-type:none">
                        <span class="radio">{{ radio.tag }}
                            <label class="label" for="{{ radio.id_for_label }}">   
                                {{ radio.choice_label }}
                            </label>
                        </span>
                    </li>
                    {% endfor %}
                </fieldset>
            </ul>
        </div>
        <div class="col">
            {{form_emp.cantidad.label}}
            {{form_emp.cantidad}}
            {{form_emp.observaciones.label}}
            {{form_emp.observaciones}}
        </div>
        
    </div>
</div>
<div class="modal-footer">
    <button class="btn btn-light" type="button" data-bs-dismiss="modal">Volver</button>
    <input type="submit" class="btn btn-primary" value="Agregar" />
</div>

无法正常工作：

<form action="" class="form-group" method="POST">
<div class="modal-body">

    <div class="row">
        <div class="col">
            <ul>
                {% csrf_token %}
                <fieldset > 
                    {% for radio in form_pizzas.producto %}
                    <li style="list-style-type:none">
                        <span class="radio">{{ radio.tag }}
                            <label class="label" for="{{ radio.id_for_label }}">   
                                {{ radio.choice_label }}
                            </label>
                        </span>
                    </li>
                    {% endfor %}
                </fieldset>
            </ul>
        </div>
        <div class="col">
            {{form_pizzas.cantidad.label}}
            {{form_pizzas.cantidad}}
            {{form_pizzas.observaciones.label}}
            {{form_pizzas.observaciones}}
        </div>
        
    </div>
</div>
<div class="modal-footer">
    <button class="btn btn-light" type="button" data-bs-dismiss="modal">Volver</button>
    <input type="submit" class="btn btn-primary" value="Agregar" />
</div>

FORMS.PY

    #WORKING FORM         
class CartEmpanadasForm(ModelForm):
    lista_prod=Producto.objects.filter(categoria=1)
    producto=forms.ModelChoiceField(widget=forms.RadioSelect, queryset=lista_prod)

    class Meta:
        model=Cart
        fields=["producto","cantidad","observaciones"]

#NOT WORKING FORM
class CartPizzasForm(ModelForm):
    #LISTA DE PRODUCTOS, FILTRO POR CATEGORÍA
    lista_prod=Producto.objects.filter(categoria=2)
    #MOSTRAR LOS ELEMENTOS COMO UN CHOICEFIELD
    producto=forms.ModelChoiceField(widget=forms.RadioSelect, queryset=lista_prod)

    class Meta:
        model=Cart
        fields=["producto","cantidad","observaciones"]

CSS 文件

label{
    width: 100%;
    border: 3px solid #1881f9;
    position: relative;
    margin: 5% 5% 5% 5%;
    border-radius: 10px;
    background-color: rgb(178, 201, 243);
    transition: 5ms;}


input[type="radio"]:checked+label{
    background-color: orange;
    border: 6px solid #f95818;
    box-shadow: 5px 5px rgb(178, 201, 243);}

我希望你们能帮助我弄清楚那里发生了什么！非常感谢您！祝您度过愉快的一周！

Answer 1

问题是我在同一个视图中显示了多个表单，默认表单的标签 ID 是“id_columnname_n”，因此多个表单不允许正确识别标签。标签 id 重复了。 我解决了在 forms.py 文件中引入自定义 id 并手动设置模板中的每个标签标签的问题。

FORMS.py

class CartEmpanadasForm(ModelForm):
#LISTA DE PRODUCTOS, FILTRO POR CATEGORÍA
lista_prod=Producto.objects.filter(categoria=1)
#MOSTRAR LOS ELEMENTOS COMO UN CHOICEFIELD
producto=forms.ModelChoiceField(widget=forms.RadioSelect(attrs={'name': 'empanada','id':'empanada'}), queryset=lista_prod)

class Meta:
    model=Cart
    fields=["producto","cantidad","observaciones"]
        

VIEW.html

<fieldset >
{% for radio in form_emp.producto %}
<li style="list-style-type:none">
    <span class="radio">{{ radio.tag }}
        <label class="label" for="empanada_{{forloop.counter0}}">   
            {{ radio.choice_label }}
        </label>
    </span>
</li>
{% endfor %}