Checkboxradio: allow the parent of the input to be the label

Conflicts:
	ui/checkboxradio.js

Author: arschmitz

tests/unit/checkboxradio/checkboxradio.html

@@ -80,6 +80,9 @@
 <input type="checkbox" class="foo" id="checkbox-option-icon"/>
 <label for="checkbox-option-label">checkbox label</label>
 <input type="checkbox" class="foo" id="checkbox-option-label"/>
+<label>
+	<input type="checkbox" id="label-with-no-for"/>
+</label>
 </div>
 </body>
 </html>

tests/unit/checkboxradio/checkboxradio_core.js

@@ -90,8 +90,8 @@ if ( !$.ui.ie || ( document.documentMode && document.documentMode > 8 ) ) {
 		}, 1 );
 	});
 }
-test( "Checkbox creation that requires a matching label does not find label in all cases", function() {
-	expect( 5 );
+test( "Checkbox creation that requires a matching finds label in all cases", function() {
+	expect( 6 );
 	var group = $( "<span><label for='t7092a'></label><input type='checkbox' id='t7092a'></span>" );
 	group.find( "input[type=checkbox]" ).checkboxradio();
 	ok( group.find( "label" ).is( ".ui-button" ) );
@@ -111,6 +111,10 @@ test( "Checkbox creation that requires a matching label does not find label in a
 	group = $( "<input type='checkbox' id='t7092e'><span><label for='t7092e'></label></span>" );
 	group.filter( "input[type=checkbox]" ).checkboxradio();
 	ok( group.find( "label" ).is( ".ui-button" ) );
+
+	group = $( "<span><label><input type='checkbox' id='t7092f'></label></span>" );
+	group.find( "input[type=checkbox]" ).checkboxradio();
+	ok( group.find( "label" ).is( ".ui-button" ) );
 });
 
 asyncTest( "Resetting a button's form should refresh the visual state of the button widget to match.", function() {

ui/checkboxradio.js

@@ -54,21 +54,24 @@ var baseClasses = "ui-button ui-widget ui-corner-all",
 
 $.widget( "ui.checkboxradio", {
 	version: "@VERSION",
-	defaultElement: "<input type='checkbox'>",
 	options: {
 		disabled: null,
 		label: null,
 		icon: false
 	},
 
 	_getCreateOptions: function() {
-		var options = {};
+		var disabled,
+			options = {};
 
 		this._readLabel();
 
 		this.originalLabel = this.label.html();
 
-		this._readDisabled( options );
+		disabled = this.element.prop( "disabled" );
+		if ( disabled != null ) {
+			options.disabled = disabled;
+		}
 
 		if ( this.originalLabel ) {
 			options.label = this.originalLabel;
@@ -95,13 +98,9 @@ $.widget( "ui.checkboxradio", {
 		formElement.off( "reset" + this.eventNamespace, formResetHandler );
 		formElement.on( "reset" + this.eventNamespace, formResetHandler );
 
-		// If the option is a boolean its been set by either user or by
-		// _getCreateOptions so we need to make sure the prop matches
-		// If it is not a boolean the user set it explicitly to null so we need to check the dom
-		if ( typeof this.options.disabled === "boolean" ) {
-			this.element.prop( "disabled", this.options.disabled );
-		} else {
-			this._readDisabled( this.options );
+		// If it is null the user set it explicitly to null so we need to check the dom
+		if ( this.options.disabled == null ) {
+			this.options.disabled = this.element.prop( "disabled" ) || false;
 		}
 
 		// If the option is true we call set options to add the disabled
@@ -133,12 +132,12 @@ $.widget( "ui.checkboxradio", {
 	},
 
 	_readLabel: function() {
-		var ancestor, labelSelector,
-			labels = this.element[ 0 ].labels;
-
+		var ancestor, labelSelector, parent = this.element.closest( "label" );
 		// Check control.labels first
-		if ( labels !== undefined && labels.length > 0 ) {
-			this.label = $( labels[ 0 ] );
+		if ( this.element[ 0 ].labels !== undefined && this.element[ 0 ].labels.length > 0 ){
+			this.label = $( this.element[ 0 ].labels[ 0 ] );
+		} else if ( parent.length > 0 ) {
+			this.label = parent;
 		} else {
 
 			// We don't search against the document in case the element
@@ -241,6 +240,8 @@ $.widget( "ui.checkboxradio", {
 
 			if ( this.type === "checkbox" ) {
 				toAdd += checked ? "ui-icon-check" : "ui-icon-blank";
+			} else {
+				toAdd += "ui-icon-blank";
 			}
 			this.icon.addClass( toAdd ).appendTo( this.label );
 		} else if ( this.icon !== undefined ) {