python - Django (HTML) - 模板中的可点击标签(不工作)
问题描述
我正在开发一个 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>
表格.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);}
我希望你们能帮助我弄清楚那里发生了什么!非常感谢您!周末愉快!
解决方案
问题是我在同一个视图中显示了多个表单,因为默认表单的标签 ID 是“id_columnname_n”,因此多个表单不允许正确识别标签。标签 id 重复。我解决了在 forms.py 文件中引入自定义 ID 并手动设置模板中的每个标签标签的问题。
表格.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 %}
推荐阅读
- python - SLURM 中的并行计算并不总是在 Python 中的 sys.exit(0) 之后退出
- haskell - 理解应用于图形的简单函数
- sql - 在红移谱 sql 查询中排除列
- angular - Kendo UI 调度程序错误“this.intlService.weekendRange 不是函数”
- xgboost - XGBoost - 自定义损失函数
- arrays - 如果在此工作簿中找不到工作表,如何找到工作表,如果单元格为空,则移动到下一个单元格,如果找不到,则退出子
- apache-spark - 如何从命令行访问 Apache PySpark?
- time-complexity - c*n*(1 - n) 的渐近时间复杂度
- apache-kafka - Spring Kafka 1.3.9.RELEASE 和 apache kafka client 1.1.1 兼容性
- c# - 如何在没有 foreach 的情况下使“foreach(名称中的字符串 TXTname)”成为变量,还是需要 foreach?