checkbox: fixed to not require a label for=id attribute if the label contains the checkbox. An id is generated if the checkbox doesn't have one since we move the checkbox out of the label in this case for consistent markup.

rdworth · rdworth · commit 93c3e8940150 · 2010-04-08T15:07:49.000-04:00
diff --git a/tests/visual/checkbox/default.html b/tests/visual/checkbox/default.html
@@ -11,21 +11,29 @@
 	<script type="text/javascript" src="../../../ui/jquery.ui.checkbox.js"></script>
 	<script type="text/javascript">
 	$(function() {
-		$("#check1, #check2, #check3").checkbox();
-
+		$(":checkbox").checkbox();
 	});
 	</script>
 </head>
 <body>
 
 <form>
 
-<input type="checkbox" id="check1" /><label for="check1">Check 1</label>
+<label><input type="checkbox" />Check 1</label>
 
-<input type="checkbox" id="check2" /><label for="check2">Check 2</label>
+<label><input type="checkbox" id="check2" />Check 2</label>
 
 <input type="checkbox" id="check3" /><label for="check3">Check 3</label>
 
+<input type="checkbox" id="check4" /><span><label for="check4">Check 4</label></span>
+
+<table>
+<tr>
+<td><input type="checkbox" id="check5" /></td>
+<td><label for="check5">Check 5</label></td>
+</tr>
+</table>
+
 </form>
 
 </body>
diff --git a/ui/jquery.ui.checkbox.js b/ui/jquery.ui.checkbox.js
@@ -15,16 +15,29 @@
  */
 (function( $ ) {
 
+var checkboxId = 0;
+
 $.widget( "ui.checkbox", {
 
 	_create: function() {
 
-		// find the checkbox's label
-		this.labelElement = $( this.element[0].ownerDocument ).find( "label[for=" + this.element.attr("id") + "]" );
-
-		// move the checkbox outside (before) the label if it's inside it
-		if ( this.labelElement.has(this.element).length ) {
+		// look for label as container of checkbox
+		this.labelElement = this.element.closest( "label" );
+		if ( this.labelElement.length ) {
+			// move the checkbox outside (before) the label
 			this.element.insertBefore( this.labelElement );
+
+			// the checkbox needs an id since it's no longer inside the label
+			if ( !this.element.attr( "id" ) ) {
+				this.element.attr( "id", "ui-checkbox-" + checkboxId );
+				checkboxId += 1;
+			}
+
+			// associate label by for=id of checkbox
+			this.labelElement.attr( "for", this.element.attr("id") );
+		} else {
+			// look for label by for=id of checkbox
+			this.labelElement = $( this.element[0].ownerDocument ).find( "label[for=" + this.element.attr("id") + "]" );
 		}
 
 		// wrap the checkbox in a new div
