CODEWITHSUNDEEP
htmldjangoformsrender
eric1994
eric1994

Reputation: 83

Render django form multiplechoice

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: enter image description here

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>

Upvotes: 3

Views: 400

Answers (2)

Cheche
Cheche

Reputation: 1516

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
    [..]

Upvotes: 0

May.D
May.D

Reputation: 1910

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 %}

Upvotes: 1

Related Questions