Render django form multiplechoice

Question

I have been searching online for how to apply colors/themes to checkbox forms items in django but could not find how to do it.

What I'd like to do is probably easy as pie, but despite all the topics and blogs I red, I still cannot manage to do it.

So here is my forms simplified:

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,)
            )

And I would like to know how I should modifiy my html which currently looks like

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

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

</form>

so that all choices with an initial set to True have a given css applied to them and the ones set to False another one.

Hope my question makes sense. Please don't hesitate if not.

Best:

Eric

Addition of the current render:

EDIT: Addition of the html generated

<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

If you need to style checked input, you can just use the CSS pseudo-class :checked , in this way:

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

However if you need to conditionally add class to your inputs, you can do it in the view where your instantiate the form and override the create_option method, but I think it's easier to create a custom template tag and use it. You can try something like below:

from django import template

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

and then in template

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

Answer 2

Try creating a new Widget based on CheckboxSelectMultiple , overriding the create_option method.

Add a new class attribute if option is selected.

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

Ok you can add classes dynamically using jQuery or vanilla js too, since I always work with jQuery(and you should too, it's so much less code than vanilla js) I will provide jQuery solution:

<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 demo.