Fixed #20555 -- Make subwidget id attribute available

In `BoundField.__iter__`, the widget's id attribute is now passed to
each subwidget. A new id_for_label property was added to ChoiceInput.

5 files changed, 75 insertions, 32 deletions

diff --git a/django/forms/forms.py b/django/forms/forms.py
index c2b700ce77..ec51507981 100644
--- a/django/forms/forms.py
+++ b/django/forms/forms.py
@@ -434,7 +434,9 @@ class BoundField(object):
         This really is only useful for RadioSelect widgets, so that you can
         iterate over individual radio buttons in a template.
         """
-        for subwidget in self.field.widget.subwidgets(self.html_name, self.value()):
+        id_ = self.field.widget.attrs.get('id') or self.auto_id
+        attrs = {'id': id_} if id_ else {}
+        for subwidget in self.field.widget.subwidgets(self.html_name, self.value(), attrs):
             yield subwidget
 
     def __len__(self):
diff --git a/django/forms/widgets.py b/django/forms/widgets.py
index 0a5059a9c2..98d47d0b00 100644
--- a/django/forms/widgets.py
+++ b/django/forms/widgets.py
@@ -601,16 +601,15 @@ class ChoiceInput(SubWidget):
         self.choice_value = force_text(choice[0])
         self.choice_label = force_text(choice[1])
         self.index = index
+        if 'id' in self.attrs:
+            self.attrs['id'] += "_%d" % self.index
 
     def __str__(self):
         return self.render()
 
     def render(self, name=None, value=None, attrs=None, choices=()):
-        name = name or self.name
-        value = value or self.value
-        attrs = attrs or self.attrs
-        if 'id' in self.attrs:
-            label_for = format_html(' for="{0}_{1}"', self.attrs['id'], self.index)
+        if self.id_for_label:
+            label_for = format_html(' for="{0}"', self.id_for_label)
         else:
             label_for = ''
         return format_html('<label{0}>{1} {2}</label>', label_for, self.tag(), self.choice_label)
@@ -619,13 +618,15 @@ class ChoiceInput(SubWidget):
         return self.value == self.choice_value
 
     def tag(self):
-        if 'id' in self.attrs:
-            self.attrs['id'] = '%s_%s' % (self.attrs['id'], self.index)
         final_attrs = dict(self.attrs, type=self.input_type, name=self.name, value=self.choice_value)
         if self.is_checked():
             final_attrs['checked'] = 'checked'
         return format_html('<input{0} />', flatatt(final_attrs))
 
+    @property
+    def id_for_label(self):
+        return self.attrs.get('id', '')
+
 
 class RadioChoiceInput(ChoiceInput):
     input_type = 'radio'
diff --git a/docs/ref/forms/widgets.txt b/docs/ref/forms/widgets.txt
index 080d1fea86..951fbfa310 100644
--- a/docs/ref/forms/widgets.txt
+++ b/docs/ref/forms/widgets.txt
@@ -590,25 +590,26 @@ Selector and checkbox widgets
     .. code-block:: html
 
         <div class="myradio">
-            <label><input type="radio" name="beatles" value="john" /> John</label>
+            <label for="id_beatles_0"><input id="id_beatles_0" name="beatles" type="radio" value="john" /> John</label>
         </div>
         <div class="myradio">
-            <label><input type="radio" name="beatles" value="paul" /> Paul</label>
+            <label for="id_beatles_1"><input id="id_beatles_1" name="beatles" type="radio" value="paul" /> Paul</label>
         </div>
         <div class="myradio">
-            <label><input type="radio" name="beatles" value="george" /> George</label>
+            <label for="id_beatles_2"><input id="id_beatles_2" name="beatles" type="radio" value="george" /> George</label>
         </div>
         <div class="myradio">
-            <label><input type="radio" name="beatles" value="ringo" /> Ringo</label>
+            <label for="id_beatles_3"><input id="id_beatles_3" name="beatles" type="radio" value="ringo" /> Ringo</label>
         </div>
 
     That included the ``<label>`` tags. To get more granular, you can use each
-    radio button's ``tag`` and ``choice_label`` attributes. For example, this template...
+    radio button's ``tag``, ``choice_label`` and ``id_for_label`` attributes.
+    For example, this template...
 
     .. code-block:: html+django
 
         {% for radio in myform.beatles %}
-            <label>
+            <label for="{{ radio.id_for_label }}">
                 {{ radio.choice_label }}
                 <span class="radio">{{ radio.tag }}</span>
             </label>
@@ -618,31 +619,41 @@ Selector and checkbox widgets
 
     .. code-block:: html
 
-            <label>
-                John
-                <span class="radio"><input type="radio" name="beatles" value="john" /></span>
-            </label>
-            <label>
-                Paul
-                <span class="radio"><input type="radio" name="beatles" value="paul" /></span>
-            </label>
-            <label>
-                George
-                <span class="radio"><input type="radio" name="beatles" value="george" /></span>
-            </label>
-            <label>
-                Ringo
-                <span class="radio"><input type="radio" name="beatles" value="ringo" /></span>
-            </label>
+        <label for="id_beatles_0">
+            John
+            <span class="radio"><input id="id_beatles_0" name="beatles" type="radio" value="john" /></span>
+        </label>
+
+        <label for="id_beatles_1">
+            Paul
+            <span class="radio"><input id="id_beatles_1" name="beatles" type="radio" value="paul" /></span>
+        </label>
+
+        <label for="id_beatles_2">
+            George
+            <span class="radio"><input id="id_beatles_2" name="beatles" type="radio" value="george" /></span>
+        </label>
 
-    If you decide not to loop over the radio buttons -- e.g., if your template simply includes
-    ``{{ myform.beatles }}`` -- they'll be output in a ``<ul>`` with ``<li>`` tags, as above.
+        <label for="id_beatles_3">
+            Ringo
+            <span class="radio"><input id="id_beatles_3" name="beatles" type="radio" value="ringo" /></span>
+        </label>
+
+    If you decide not to loop over the radio buttons -- e.g., if your template
+    simply includes ``{{ myform.beatles }}`` -- they'll be output in a ``<ul>``
+    with ``<li>`` tags, as above.
 
 .. versionchanged:: 1.6
 
 The outer ``<ul>`` container will now receive the ``id`` attribute defined on
 the widget.
 
+.. versionchanged:: 1.7
+
+    When looping over the radio buttons, the ``label`` and ``input`` tags include
+    ``for`` and ``id`` attributes, respectively. Each radio button has an
+    ``id_for_label`` attribute to output the element's ID.
+
 ``CheckboxSelectMultiple``
 ~~~~~~~~~~~~~~~~~~~~~~~~~~
 
@@ -666,6 +677,12 @@ the widget.
 Like :class:`RadioSelect`, you can now loop over the individual checkboxes making
 up the lists. See the documentation of :class:`RadioSelect` for more details.
 
+.. versionchanged:: 1.7
+
+    When looping over the checkboxes, the ``label`` and ``input`` tags include
+    ``for`` and ``id`` attributes, respectively. Each checkbox has an
+    ``id_for_label`` attribute to output the element's ID.
+
 .. _file-upload-widgets:
 
 File upload widgets
diff --git a/docs/releases/1.7.txt b/docs/releases/1.7.txt
index 6ea957d959..9fe8fc89df 100644
--- a/docs/releases/1.7.txt
+++ b/docs/releases/1.7.txt
@@ -145,6 +145,13 @@ Minor features
 * Explicit :class:`~django.db.models.OneToOneField` for
   :ref:`multi-table-inheritance` are now discovered in abstract classes.
 
+* The ``<label>`` and ``<input>`` tags rendered by
+  :class:`~django.forms.RadioSelect` and
+  :class:`~django.forms.CheckboxSelectMultiple` when looping over the radio
+  buttons or checkboxes now include ``for`` and ``id`` attributes, respectively.
+  Each radio button or checkbox includes an ``id_for_label`` attribute to
+  output the element's ID.
+
 Backwards incompatible changes in 1.7
 =====================================
 
diff --git a/tests/forms_tests/tests/test_widgets.py b/tests/forms_tests/tests/test_widgets.py
index 06ee2d6c53..3f11771d7a 100644
--- a/tests/forms_tests/tests/test_widgets.py
+++ b/tests/forms_tests/tests/test_widgets.py
@@ -833,6 +833,22 @@ beatle J R Ringo False""")
         with self.assertRaises(IndexError):
             r[42]
 
+    def test_subwidget(self):
+        # Each subwidget tag gets a separate ID when the widget has an ID specified
+        self.assertHTMLEqual("\n".join([c.tag() for c in CheckboxSelectMultiple(attrs={'id': 'abc'}).subwidgets('letters', list('ac'), choices=zip(list('abc'), list('ABC')))]), """<input checked="checked" type="checkbox" name="letters" value="a" id="abc_0" />
+<input type="checkbox" name="letters" value="b" id="abc_1" />
+<input checked="checked" type="checkbox" name="letters" value="c" id="abc_2" />""")
+
+        # Each subwidget tag does not get an ID if the widget does not have an ID specified
+        self.assertHTMLEqual("\n".join([c.tag() for c in CheckboxSelectMultiple().subwidgets('letters', list('ac'), choices=zip(list('abc'), list('ABC')))]), """<input checked="checked" type="checkbox" name="letters" value="a" />
+<input type="checkbox" name="letters" value="b" />
+<input checked="checked" type="checkbox" name="letters" value="c" />""")
+
+        # The id_for_label property of the subwidget should return the ID that is used on the subwidget's tag
+        self.assertHTMLEqual("\n".join(['<input type="checkbox" name="letters" value="%s" id="%s" />' % (c.choice_value, c.id_for_label) for c in CheckboxSelectMultiple(attrs={'id': 'abc'}).subwidgets('letters', [], choices=zip(list('abc'), list('ABC')))]), """<input type="checkbox" name="letters" value="a" id="abc_0" />
+<input type="checkbox" name="letters" value="b" id="abc_1" />
+<input type="checkbox" name="letters" value="c" id="abc_2" />""")
+
     def test_multi(self):
         class MyMultiWidget(MultiWidget):
             def decompress(self, value):