Checkboxradio: refresh() has to check whether to disable or not

Closes jquery-archivegh-7600 Fixes jquery-archivegh-7598
agcolom · Nov 26, 2014 · cf185f8 · cf185f8
1 parent 165de8a
commit cf185f8
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 20 deletions.
diff --git a/js/widgets/forms/checkboxradio.js b/js/widgets/forms/checkboxradio.js
@@ -296,14 +296,13 @@ $.widget( "mobile.checkboxradio", $.extend( {
 	},
 
 	refresh: function() {
-		var hasIcon = this._hasIcon(),
-			isChecked = this.element[ 0 ].checked,
+		var isChecked = this.element[ 0 ].checked,
 			active = $.mobile.activeBtnClass,
 			iconposClass = "ui-btn-icon-" + this.options.iconpos,
 			addClasses = [],
 			removeClasses = [];
 
-		if ( hasIcon ) {
+		if ( this._hasIcon() ) {
 			removeClasses.push( active );
 			addClasses.push( iconposClass );
 		} else {
@@ -319,6 +318,8 @@ $.widget( "mobile.checkboxradio", $.extend( {
 			removeClasses.push( this.checkedClass );
 		}
 
+		this.widget().toggleClass( "ui-state-disabled", this.element.prop( "disabled" ) );
+
 		this.label
 			.addClass( addClasses.join( " " ) )
 			.removeClass( removeClasses.join( " " ) );

diff --git a/tests/unit/checkboxradio/checkboxradio_core.js b/tests/unit/checkboxradio/checkboxradio_core.js
@@ -26,26 +26,43 @@
 		ok( elem.siblings( "label[for='chk\\[\\'3\\'\\]-1']" ).length === 1, "element has exactly one sibling of the form label[for='chk[\'3\']-1']" );
 	});
 
-	test( "widget can be disabled and enabled", function(){
-		var input = $( "#checkbox-1" ),
-			button = input.parent().find( ".ui-btn" );
-
-		input.checkboxradio( "disable" );
-		input.checkboxradio( "enable" );
-		ok( !input.prop("disabled"), "start input as enabled" );
-		ok( !input.parent().hasClass( "ui-state-disabled" ), "no disabled styles" );
-		ok( !input.prop("checked"), "not checked before click" );
+	function testEnableDisable( theInput, theMethod ) {
+		var button = theInput.parent().find( ".ui-btn" );
+
+		theMethod( theInput, true );
+		theMethod( theInput, false );
+		ok( !theInput.prop("disabled"), "start input as enabled" );
+		ok( !theInput.parent().hasClass( "ui-state-disabled" ), "no disabled styles" );
+		ok( !theInput.prop("checked"), "not checked before click" );
 		button.trigger( "click" );
-		ok( input.prop("checked"), "checked after click" );
+		ok( theInput.prop("checked"), "checked after click" );
 		ok( button.hasClass( "ui-checkbox-on" ), "active styles after click" );
 		button.trigger( "click" );
-		input.checkboxradio( "disable" );
-		ok( input.prop( "disabled" ), "input disabled" );
-		ok( input.parent().hasClass( "ui-state-disabled" ), "disabled styles" );
-		ok( !input.prop( "checked" ), "not checked before click" );
+		theMethod( theInput, true );
+		ok( theInput.prop( "disabled" ), "input disabled" );
+		ok( theInput.parent().hasClass( "ui-state-disabled" ), "disabled styles" );
+		ok( !theInput.prop( "checked" ), "not checked before click" );
 		button.trigger( "click" );
-		ok( !input.prop( "checked" ), "not checked after click" );
+		ok( !theInput.prop( "checked" ), "not checked after click" );
 		ok( !button.hasClass( "ui-checkbox-on" ), "no active styles after click" );
+	}
+
+	test( "widget can be disabled and enabled via enable()/disable() method", function(){
+		testEnableDisable( $( "#checkbox-disabled-test-1" ), function( theInput, isDisabled ) {
+			theInput.checkboxradio( isDisabled ? "disable" : "enable" );
+		});
+	});
+
+	test( "widget can be disabled and enabled via option 'disabled'", function(){
+		testEnableDisable( $( "#checkbox-disabled-test-2" ), function( theInput, isDisabled ) {
+			theInput.checkboxradio( "option", "disabled", isDisabled );
+		});
+	});
+
+	test( "widget can be disabled and enabled via prop + refresh()", function(){
+		testEnableDisable( $( "#checkbox-disabled-test-3" ), function( theInput, isDisabled ) {
+			theInput.prop( "disabled", isDisabled ).checkboxradio( "refresh" );
+		});
 	});
 
 	test( "clicking a checkbox within a controlgroup does not affect checkboxes with the same name in the same controlgroup", function(){

diff --git a/tests/unit/checkboxradio/index.html b/tests/unit/checkboxradio/index.html
@@ -67,8 +67,24 @@
 			<div data-nstest-role="fieldcontain">
 				<fieldset data-nstest-role="controlgroup">
 					<legend>Agree to the terms:</legend>
-					<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom"/>
-					<label for="checkbox-1">I agree</label>
+					<input type="checkbox" name="checkbox-disabled-test-1" id="checkbox-disabled-test-1" class="custom"/>
+					<label for="checkbox-disabled-test-1">I agree</label>
+				</fieldset>
+			</div>
+
+			<div data-nstest-role="fieldcontain">
+				<fieldset data-nstest-role="controlgroup">
+					<legend>Agree to the terms:</legend>
+					<input type="checkbox" name="checkbox-disabled-test-2" id="checkbox-disabled-test-2" class="custom"/>
+					<label for="checkbox-disabled-test-2">I agree</label>
+				</fieldset>
+			</div>
+
+			<div data-nstest-role="fieldcontain">
+				<fieldset data-nstest-role="controlgroup">
+					<legend>Agree to the terms:</legend>
+					<input type="checkbox" name="checkbox-disabled-test-3" id="checkbox-disabled-test-3" class="custom"/>
+					<label for="checkbox-disabled-test-3">I agree</label>
 				</fieldset>
 			</div>