当 form.is_bound 重置带有 CheckboxSelectMultiple 和 Bootstrap 自定义控件输入的 Django forms.MultipleChoiceField

Posted 2023-03-05

【中文标题】当 form.is_bound 重置带有 CheckboxSelectMultiple 和 Bootstrap 自定义控件输入的 Django forms.MultipleChoiceField

【英文标题】：Django forms.MultipleChoiceField with CheckboxSelectMultiple and Bootstrap custom-control-input is reset when form.is_bound

【发布时间】：2021-06-26 04:17:44

【问题描述】：

我有一个表单域：

Forms.py

colors = forms.MultipleChoiceField(
        required=True,
        widget=forms.CheckboxSelectMultiple,
        choices= [(1,'blue'),(2,'red'),(3,'green')]
    )

我可以像这样轻松地渲染这个字段：

模板.html

 form.colors 

然后得到一些看起来像这样的东西：

所以 html 代码如下所示：

<ul id="id_colors">
    <li><label for="id_colors_0"><input type="checkbox" name="colors" value="1" id="id_colors_0" checked="">
 blue</label>

</li>
    <li><label for="id_colors_1"><input type="checkbox" name="colors" value="2" id="id_colors_1" checked="">
 red</label>

</li>
    <li><label for="id_colors_2"><input type="checkbox" name="colors" value="3" id="id_colors_2">
 green</label>

</li>
</ul>

这真的很简单！而且运行良好。

现在，假设我想以不同的方式渲染它，就像这样：

使用引导程序自定义控制输入。

Bootstrap 文档显示了实现此目的的代码：

  <div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
    <label class="custom-control-label" for="customCheck">Check this custom checkbox</label>
  </div>

所以，在我的模板中我做了类似的事情：

模板.html

<div class="custom-checkbox">
    <ul id="id_colors"> 
        % for key, value in colors %
            <li>
            <input type="checkbox" class="custom-control-input" value="key" name="colors" id="id_colors_ forloop.counter0 ">
            <label class="custom-control-label" for="id_colors_ forloop.counter0 ">value</label>
            </li>
        % endfor %
    </ul>
</div>

（“颜色”只是我通过视图传递给模板的列表）

使用该模板，该字段看起来与我想要的完全一样。 渲染后的 html 如下所示：

<ul id="id_colors">              
        <li>
        <input type="checkbox" class="custom-control-input" value="1" name="colors" id="id_colors_0">
        <label class="custom-control-label" for="id_colors_0">blue</label>
        </li>
    
        <li>
        <input type="checkbox" class="custom-control-input" value="2" name="colors" id="id_colors_1">
        <label class="custom-control-label" for="id_colors_1">red</label>
        </li>
    
        <li>
        <input type="checkbox" class="custom-control-input" value="3" name="colors" id="id_colors_2">
        <label class="custom-control-label" for="id_colors_2">green</label>
        </li>
    
</ul>

所以一切正常！

是的，除了，如果我提交了表单，但它没有被验证（form.is_bound），选中的复选框将被重置。

如果我不应用自定义控件输入样式，并以简单的方式呈现此字段，我就没有这个问题...

如果你们知道如何解决这个问题。

【问题讨论】：

您可以分享您处理表单的视图吗？

现在视图中没有什么特别的，只是在上下文中使用颜色选择来渲染表单

【参考方案1】：

最后我创建了一个样式来匹配引导自定义表单样式，所以在我的模板中，我可以保持简单，只需调用字段：

模板.html

% render_field form.colors class="My-CheckBoxStyle"%

这样，一切正常！