js/widgets/controlgroup.js

@@ -63,6 +63,7 @@ define( [ "jquery",
 			this.element
 				.removeClass( "ui-controlgroup-horizontal ui-controlgroup-vertical" )
 				.addClass( "ui-controlgroup-" + value );
+			this._refresh( false );
 		},
 
 		_setCorners: function( value ) {
@@ -83,6 +84,7 @@ define( [ "jquery",
 
 		_refresh: function( create ) {
 			var els = this.element.find( ".ui-btn" ).not( ".ui-slider-handle" );
+			this.element.find( ":mobile-checkboxradio" ).checkboxradio( "refresh" );
 			this._addFirstLastClasses( els, this.options.excludeInvisible ? this._getVisibles( els, create ) : els, create );
 		},
 

js/widgets/forms/checkboxradio.js

@@ -34,14 +34,9 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, {
 			mini = inheritAttr( input, "mini" ) || o.mini,
 			checkedState = inputtype + "-on",
 			uncheckedState = inputtype + "-off",
-			icon = uncheckedState,
 			iconpos = inheritAttr( input, "iconpos" ),
-			horizontal = input.parents( ":jqmData(type='horizontal')" ).length,
-			activeBtn = $.mobile.activeBtnClass,
 			checkedClass = "ui-" + checkedState,
-			uncheckedClass = "ui-" + uncheckedState,
-			checkedicon = icon ? checkedState : undefined,
-			uncheckedicon = icon ? uncheckedState : undefined;
+			uncheckedClass = "ui-" + uncheckedState;
 
 		if ( inputtype !== "checkbox" && inputtype !== "radio" ) {
 			return;
@@ -51,12 +46,10 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, {
 		$.extend( this, {
 			label: label,
 			inputtype: inputtype,
-			horizontal: horizontal,
-			activeBtn: activeBtn,
 			checkedClass: checkedClass,
 			uncheckedClass: uncheckedClass,
-			checkedicon: checkedicon,
-			uncheckedicon: uncheckedicon
+			checkedicon: checkedState,
+			uncheckedicon: uncheckedState
 		});
 
 		// If there's no selected theme check the data attr
@@ -66,7 +59,7 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, {
 
 		label.buttonMarkup({
 			theme: o.theme,
-			icon: icon,
+			icon: uncheckedState,
 			shadow: false,
 			mini: mini,
 			iconpos: iconpos
@@ -183,19 +176,25 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, {
 	},
 
 	refresh: function() {
-		var input = this.element[0],
-			label = this.label;
-
-		if ( this.horizontal ) {
-			this.checkedClass = this.checkedClass + " " + this.activeBtn;
-		}
+		var input = this.element[ 0 ],
+			horizontal = this.element.parents( ".ui-controlgroup-horizontal" ).length,
+			active = " " + $.mobile.activeBtnClass,
+			checkedClass = this.checkedClass + ( horizontal ? active : "" ),
+			icon, label = this.label;
 
 		if ( input.checked ) {
-			label.addClass( this.checkedClass ).removeClass( this.uncheckedClass ).buttonMarkup( { icon: this.checkedicon } );
+			label.removeClass( this.uncheckedClass + active ).addClass( checkedClass );
+			icon = this.checkedicon;
 		} else {
-			label.removeClass( this.checkedClass ).addClass( this.uncheckedClass ).buttonMarkup( { icon: this.uncheckedicon } );
+			label.removeClass( checkedClass ).addClass( this.uncheckedClass );
+			icon = this.uncheckedicon;
+		}
+		if ( horizontal ) {
+			icon = undefined;
 		}
 
+		label.buttonMarkup( { icon: icon } );
+
 		if ( input.disabled ) {
 			this.disable();
 		} else {

tests/functional/controlgroup.html

@@ -15,22 +15,24 @@
 		$( "#prepend,#append", e.target ).bind( "click", function( e ) {
 			counter++;
 			var widgetType = $( "[name='radio-widget']:checked" ).attr( "id" ),
-				grp = $( "#controlgroup" ),
-				op = $( "[name='radio-op']:checked" ).attr( "id" ),
-				$el;
+				grp = $( "#controlgroup" ), $el,
+				action = function() {
+					var op = $( "[name='radio-op']:checked" ).attr( "id" );
+					$el[ op ](); grp.controlgroup( "refresh" );
+				};
 
 			if ( widgetType === "link" ) {
-				$el = $( "<a href='#'>Remove " + counter + "</a>" ).bind( "click", function( e ) { $el[op](); grp.controlgroup( "refresh" ); } );
+				$el = $( "<a href='#'>Remove " + counter + "</a>" ).bind( "click", action );
 				$( "#controlgroup" ).controlgroup( "container" )[ $( this ).attr( "id" ) ]( $el );
 				$el.buttonMarkup();
 			} else if ( widgetType === "select" ) {
 				$el = $( "<label for='widget" + counter + "'>Select " + counter + "</label><select id='widget" + counter + "'><option id='widget" + counter + "' value='default'>Select " + counter + "</option><option value='remove'>Remove</option></select>" );
-				$( $el[ 1 ] ).bind( "change", function( e ) { $el[op](); grp.controlgroup( "refresh" ); });
+				$( $el[ 1 ] ).bind( "change", action);
 				$( "#controlgroup" ).controlgroup( "container" )[ $( this ).attr( "id" ) ]( $el );
 				$( $el[ 1 ] ).selectmenu();
 			} else {
 				$el = $( "<label for='widget" + counter + "'>Remove " + counter + "</label><input type='checkbox' id='widget" + counter + "'></input>" );
-				$( $el[ 1 ] ).bind( "change", function( e ) { $el[op](); grp.controlgroup( "refresh" ); });
+				$( $el[ 1 ] ).bind( "change", action );
 				$( "#controlgroup" ).controlgroup( "container" )[ $( this ).attr( "id" ) ]( $el );
 				$( $el[ 1 ] ).checkboxradio();
 			}
@@ -78,6 +80,9 @@ <h1>Controlroup Dynamic Modification</h1>
 
 	        				<input type="radio" name="radio-op" id="hide" value="hide"  />
 	        				<label for="hide">Hide</label>
+
+	        				<input type="radio" name="radio-op" id="width" value="width"  />
+	        				<label for="width">Nothing</label>
 	  				</fieldset>
 					<div data-role="fieldcontain">
 						<input id="isHorizontal" data-inline="true" type="checkbox"></input>