BooleanField checkbox not render correctly with crispy_forms using bootstrap

问题

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

回答1:

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>