Permalink
Browse files

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

(cherry picked from commit b33ec10)

Closes gh-7600
Fixes gh-7598
  • Loading branch information...
gabrielschulhof committed Jul 30, 2014
1 parent ede2f5f commit 2f45cb956c86d1edbf65f82d91515fcf649534df
@@ -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( " " ) );
@@ -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(){
@@ -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>

0 comments on commit 2f45cb9

Please sign in to comment.