BooleanField 复选框无法通过使用 bootstrap 的crispy_forms 正确呈现

Posted 2023-02-24

【中文标题】BooleanField 复选框无法通过使用 bootstrap 的crispy_forms 正确呈现

【英文标题】：BooleanField checkbox not render correctly with crispy_forms using bootstrap

【发布时间】：2014-03-27 00:09:59

【问题描述】：

我正在使用crispy_forms 和FormHelper。我有一个模型字段声明为：

active = models.BooleanField(default=True)

在我的 ModelForm 中，我在布局中尝试了以下两种方法：

    self.helper.layout = Layout(
                    ...
        InlineCheckboxes('active'),
        Field('active'),
                    ...

两者都没有提供预期的结果：

请看image link

在使用 InlineCheckboxes 时，我没有看到复选框并且只使用了字段，它的格式不正确。

请帮忙

【参考方案1】：

这是 Crispy Forms 文档的“引导布局对象”部分的 link。

InlineCheckboxes：它使用内联复选框呈现 Django forms.MultipleChoiceField 字段

InlineCheckboxes 不适合您模型的字段类型。

---

实现您正在寻找的一个hacky方法是使用PrependedText和一个空字符串作为text参数。

...
PrependedText('active', ''),
...

---

检查源，默认情况下，布尔字段似乎在<label> 标记内呈现<input> 标记。使用上面的 hack，'Active' 保留在 <label> 中，<input> 放在您期望的位置：在带有“控制”css 类的 <div> 中。比较以下：

PrependedText('active', ''):

  <div id="div_id_active" class="form-group">
    <label for="id_active" class="control-label">Active</label>

    <div class="controls">
      <div class="input-group">
        <input type="checkbox" name="active" class="checkboxinput" id="id_active" />
      </div>
    </div>
  </div>

Field('active'):

  <div class="form-group">
    <div id="div_id_active" class="checkbox">
      <div class="controls">
        <label for="id_active" class=""><input type="checkbox" name="active" class=
        "checkboxinput checkbox" id="id_active" /> Active</label>
      </div>
    </div>
  </div>

更新

我已确认这已在 django-crispy-forms 的 dev 分支中修复。

参考这个提交：5c3a268

还有这个 github 问题：#267