BooleanField 复选框无法使用 bootstrap 正确呈现出crispy_forms [英] BooleanField checkbox not render correctly with crispy_forms using bootstrap

问题描述

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

active = models.BooleanField(default=True)

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

 self.helper.layout = Layout(...InlineCheckboxes('active'),字段('活动')，...

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

请参阅图片链接

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

请帮忙

解决方案

这里是 链接到 Crispy Forms 文档的Bootstrap Layout objects"部分.

<块引用>

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

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

<小时>

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

<代码>...PrependedText('active', ''),...

<小时>

检查来源，似乎布尔字段默认呈现 标签内的 标签.使用上面的 hack，'Active' 保留在 中，而 放在您期望的位置:在 中.div> 带有控制"css 类.比较以下内容:

PrependedText('active', ''):

 
<label for="id_active" class="control-label">Active</label><div class="控件"><div class="input-group"><input type="checkbox" name="active" class="checkboxinput" id="id_active"/>

Field('active'):

 
<div id="div_id_active" class="checkbox"><div class="控件"><label for="id_active" class=""><input type="checkbox" name="active" class="checkboxinput 复选框" id="id_active"/>活动</label>

更新

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

参考此提交:5c3a268

还有这个 github 问题:#267

I am using crispy_forms and FormHelper. I have a model field declared as:

active = models.BooleanField(default=True)

And in my ModelForm, I have tried both the following in my Layout:

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

which both not providing the desired result:

Please see image link

While using InlineCheckboxes, I do not see the checkbox and using only Field, it's not formatted correctly.

Please help

解决方案

Here is the link to the "Bootstrap Layout objects" section of Crispy Forms docs.

InlineCheckboxes: It renders a Django forms.MultipleChoiceField field using inline checkboxes

InlineCheckboxes isn't appropriate for your model's field-type.

---

A hacky way to achieve what you're looking for is to use PrependedText with an empty string for the text argument.

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

---

Examining the source it appears that a boolean field by default renders the <input> tag inside the <label> tag. Using the hack above, 'Active' stays in the <label> and the <input> is put where you'd expect: in a <div> with "control" css class. Compare the following:

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>

Update

I've confirmed that this is fixed in the dev branch of django-crispy-forms.

Reference this commit: 5c3a268

And this github issue: #267

这篇关于BooleanField 复选框无法使用 bootstrap 正确呈现出crispy_forms的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！