Django：复选框未显示在HTML中

Question

此表单有多种选择。但是，复选框不会显示为HTML！我正在使用Materialize CSS。请帮助。

forms.py：

FAVORITE_COLORS_CHOICES = (
('blue', 'Blue'),
('green', 'Green'),
('black', 'Black'),
)

class StudentForm(forms.ModelForm):
    favorite_colors = forms.MultipleChoiceField(
        required=False,
        widget=forms.CheckboxSelectMultiple,
        choices=FAVORITE_COLORS_CHOICES,
    )

form.html：

<div class="container">
<form>

{{ form.as_p }}

<input type='submit' value='Save' />

</form>

浏览器中的HTML页面：

从浏览器查看源代码：

<form>

    <p><label for="id_student_name">Student name:</label> <input type="text" name="student_name" maxlength="200" required id="id_student_name"></p>
<p><label for="id_present">Present:</label> <input type="checkbox" name="present" required id="id_present"></p>
<p><label>Favorite colors:</label> <ul id="id_favorite_colors">
    <li><label for="id_favorite_colors_0"><input type="checkbox" 
name="favorite_colors" value="blue" id="id_favorite_colors_0">
 Blue</label>

</li>
    <li><label for="id_favorite_colors_1"><input type="checkbox" 
name="favorite_colors" value="green" id="id_favorite_colors_1">
 Green</label>

</li>
    <li><label for="id_favorite_colors_2"><input type="checkbox" 
name="favorite_colors" value="black" id="id_favorite_colors_2">
 Black</label>

</li>
</ul></p>

    <input type='submit' value='Save' />

    </form>

更新：

 {% for field in form %}
        <p>
            <input type="checkbox" id=field />
        <label for=field>Hello</label>
        </p>
    {% endfor %}

Answer 1

Materialize CSS要求复选框必须在label元素内，然后在输入元素旁边带有span元素。使用Django的{{ form.as_p }}不包含span元素，导致复选框无法正确显示。您将需要分别拆分表单中的每个字段（for循环也将起作用）。

{% for field in form %}
    <label>
        <input type="checkbox">
        <span>{{ field.name }}</span>
    </label
{% endfor %}

以上代码已更新。我认为field.name可以工作，但命名方式可能不同（例如field.value idk）

Answer 2

基本问题是Django输出如下颜色选项：

  <!-- default Django -->
  <li>
    <label for="id_favorite_colors_1">
      <input type="checkbox" name="favorite_colors" value="green" id="id_favorite_colors_1">
      Green
    </label>
  </li>

..当然还有单个复选框字段，Django输出：

<p>
    <label for="id_present">Present:</label>
    <input type="checkbox" name="present" required id="id_present">
</p>

而Materialize希望看到它们像这样（注意单词“ Blue”周围的<span>）：

  <!-- correct Materialize -->
  <li>
    <label for="id_favorite_colors_0">
      <input type="checkbox" name="favorite_colors" value="blue" id="id_favorite_colors_0">
      <span>Blue</span>
    </label>
  </li>

jsfiddle（https://jsfiddle.net/8eamw6dg/）

[恐怕Django在此唯一的解决方案是手动呈现字段（docs：https://docs.djangoproject.com/en/dev/topics/forms/#rendering-fields-manually）。即代替

<form>
{{ form.as_p }}
<input type='submit' value='Save' />
</form>

您将需要类似的东西

<form>
{{ form.non_field_errors }}
<p>... student name field here ...</p>

<p>
    {{ form.present.errors }}
    <label for="{{ form.present.id_for_label }}">
        {{ form.present }}
        <span>{{ form.present.label }}</span>
    </label>
</p>

etc. for all the other fields...

<input type='submit' value='Save' />
</form>

Answer 3

如果我正确理解了您的问题，以下是我面临和解决的问题：

在这种情况下，Django使用css'disply：none'渲染标签，因此复选框，单选和下拉选项都不会为我显示。

我写了一个简单的JavaScript来解决这个问题，在我的模板中：

var elems = document.querySelectorAll('label.form-check-label');
for (i = 0; i < elems.length; i++) {
elems[i].style.display = "inline";
}