I want to customize my label style, so I overwrite {{ form }} in my html template with a for loop through all choices. But I found I lost label 'for' attribute and 'id' of the input for each choice after using for loop. Old codes: html template:
{% block form %}
<button class="checker">Uncheck all</button> <button class="allChecker">Check all</button>
<form method="POST" enctype="multipart/form-data">
{% csrf_token %}
{{ form }}
<br/>
<input type="submit" value="Submit">
</form>
{% endblock %}
my form:
class RerunForm(forms.Form):
items = ItemStatus(
queryset=models.Container.objects.none(),
widget=forms.CheckboxSelectMultiple(attrs=dict(checked='')),
help_text="Select requirements/objectives that you want to rerun.",
)
def __init__(self, rerunqueryset, *args, **kwargs):
super(RerunForm, self).__init__(*args, **kwargs)
self.fields['items'].queryset = rerunqueryset
class ItemStatus(models.ModelMultipleChoiceField):
def label_from_instance(self, obj):
if '_' not in obj.name:
return "{} ({})".format(obj.name.replace('-r1', '').replace('-s1', ''), obj.state)
else:
return ". . . {} ({})".format(obj.name.replace('-r1', ''), obj.state)
New Codes: html template:
{% block form %}
<button class="checker">Uncheck all</button> <button class="allChecker">Check all</button>
<form method="POST" enctype="multipart/form-data">
{% csrf_token %}
<ul id="id_items">
{% for value, label, item in form.items.field.choices %}
<li>
<label for="{{ form.items.id }}">
<input type="checkbox" value={{ value }} name="items" id="{{ form.items.auto_id }}">
<span class="listItem-{{item.state}}">{{ label }}</span>
</label>
</li>
{% endfor %}
</ul> <br/>
<input type="submit" value="Submit">
</form>
{% endblock %}
new form:
class RerunForm(forms.Form):
items = ItemStatus(
queryset=models.Container.objects.none(),
widget=forms.CheckboxSelectMultiple(attrs=dict(checked='')),
help_text="Select requirements/objectives that you want to rerun.",
)
def __init__(self, rerunqueryset, *args, **kwargs):
super(RerunForm, self).__init__(*args, **kwargs)
self.fields['items'].queryset = rerunqueryset
class ItemStatus(models.ModelMultipleChoiceField):
def label_from_instance(self, obj):
if '_' not in obj.name:
return "{} ({})".format(obj.name.replace('-r1', '').replace('-s1', ''), obj.state)
else:
return ". . . {} ({})".format(obj.name.replace('-r1', ''), obj.state)
def _get_choices(self):
if hasattr(self, '_choices'):
return self._choices
return CustomModelChoiceIterator(self)
choices = property(_get_choices,
MultipleChoiceField._set_choices)
class CustomModelChoiceIterator(models.ModelChoiceIterator):
def choice(self, obj):
# return super(CustomModelChoiceIterator, self).choice(obj)
return (self.field.prepare_value(obj),
self.field.label_from_instance(obj),
obj)
The old codes gave me <label for='id_items_1'><input ... id='id_items_1>... when I inspect, but the new codes only gave me <label><input ...> without for and id attributes.
I tried adding <label for="{{ form.items.id_for_label }}> in html, no luck.
then <label for="{{ form.items.auto_it }}> gave me <label for="id_items">, but not differentiate choice from one to another. Please help on how to add 'id_items_0', 'id_items_1',... as label 'for' and input 'id' to each of my choice in html?
I also attached what it looks like now with new codes.
web-page and inspect results with new codes
