渲染django形式multiplechoice

Question

我一直在網上搜索如何將顏色/主題應用於django中的復選框表單項，但找不到如何操作。

我想做的事情可能很簡單，但是盡管所有主題和博客都是紅色的，我仍然無法做到。

所以這是我的表格簡化：

class MyForm(forms.Form):

    def __init__(self, data, *args, **kwargs):
        super(MyForm, self).__init__(data, *args, **kwargs)
        self.fields['checkbox'] = forms.MultipleChoiceField(
            label='Set of questions to know you better',
            required=True,
            widget=forms.CheckboxSelectMultiple(attrs={'disabled': 'disabled'}),
            choices=((1, 'Proposition 1'), (2, 'Proposition 2'), (3, 'Proposition 3'), (4, 'Proposition 4')),
            initial=(1, 2, 4,)
            )

而且我想知道如何修改我目前看起來的html

<form action="{% url 'dummy' %}" method="post">

    {% csrf_token %}
    {{ form.as_p }}

</form>

所以初始設置為True的所有選項都有一個給定的css應用於它們，而那些設置為False的另一個選擇。

希望我的問題有道理。 如果沒有，請不要猶豫。

最好：

埃里克

添加當前渲染：

編輯：添加生成的HTML

<form action="/dummy" method="post">

    <input type='hidden' name='csrfmiddlewaretoken' value='LGZ0mwqrAKxb7CzFvOyYIyUIcDSARy4iwEtHVDjKPpnBd1AIXlk4UyxRuCSIEviY' />
    <p><label>Set of questions to know you better :</label> <ul id="id_checkbox">
    <li><label for="id_checkbox_0"><input type="checkbox" name="checkbox" value="1" disabled="disabled" id="id_checkbox_0" checked />
 Proposition 1</label>

</li>
    <li><label for="id_checkbox_1"><input type="checkbox" name="checkbox" value="2" disabled="disabled" id="id_checkbox_1" checked />
 Proposition 2</label>

</li>
    <li><label for="id_checkbox_2"><input type="checkbox" name="checkbox" value="3" disabled="disabled" id="id_checkbox_2" />
 Proposition 3</label>

</li>
    <li><label for="id_checkbox_3"><input type="checkbox" name="checkbox" value="4" disabled="disabled" id="id_checkbox_3" checked />
 Proposition 4</label>

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

</form>

Answer 1

如果你需要設置檢查輸入的樣式，你可以使用CSS偽類:checked ，這樣：

input:checked {
  /*some code here */
}

但是，如果您需要有條件地將類添加到輸入中，則可以在實例化表單的視圖中執行此操作並覆蓋create_option方法，但我認為創建自定義模板標記並使用它更容易。 您可以嘗試以下內容：

from django import template

@register.filter
def add_css(checkbox_input):
    checkbox_input.data['attrs'].update({"class":"your-class"})
    return checkbox_input

然后在模板中

{% for x in form.checkbox %}
    {% if x.data.selected %}
        {{ x|add_css }}
    {% else %}
       {{ x }}
    {% endif %}
{% endfor %}

Answer 2

嘗試基於CheckboxSelectMultiple創建一個新的Widget，覆蓋create_option方法。

如果選擇了選項，則添加新的類屬性。

def create_option(self, name, value, label, selected, index, subindex=None, attrs=None):
    [..]
    if selected:
        option_attrs.update(self.checked_attribute)
        # add your class here to option_attrs
    [..]

Answer 3

好的，您也可以使用jQuery或vanilla js動態添加類，因為我總是使用jQuery（你也應該使用它，它的代碼比vanilla js少得多）我將提供jQuery解決方案：

<script "src={% static 'jquery.js' %}" type="text/javascript"></script> // provide path to jquery or use cdn, whatever just add jquery
<script>
$(document).ready(function() {
    // On document ready add relevant classes to each checkbox
    $('input[name=checkbox]').each(function(){
        if($(this).is(':checked')){
            $(this).addClass('checked');
        }
        else{
          $(this).addClass('unchecked');
        }
        console.log(this);
    });
    // On checkbox change, remove classes and add new class based on if its checked or not
    $('input[name=checkbox]').change(function(){
        $(this).removeClass('checked unchecked');
        if($(this).is(':checked')){
            $(this).addClass('checked');
        }
        else{
            $(this).addClass('unchecked');
        }
        console.log(this);
    });
});
</script>

jsFiddle演示。