Button: Remove `ui-state-active` when disabling buttons

Fixes #9602
Closes gh-1151

2 files changed, 40 insertions, 1 deletions

diff --git a/tests/unit/button/button_options.js b/tests/unit/button/button_options.js
index 124a8699f..9c8ed84d3 100644
--- a/tests/unit/button/button_options.js
+++ b/tests/unit/button/button_options.js
@@ -38,6 +38,41 @@ test("disabled, null", function() {
 	deepEqual(true, $("#radio02").prop("disabled"), "element is not disabled");
 });
 
+test( "disabled, ui-state-active is removed unless checkbox or radio", function() {
+	expect( 12 );
+	var elements = [
+			$( "<input type='button'>" ),
+			$( "<button></button>" ),
+			$( "<a></a>" ),
+			$( "<div></div>" ),
+			$( "<input type='checkbox' id='checkbox' checked><label for='checkbox'></label>" ),
+			$( "<input type='radio' id='radio' checked><label for='radio'></label>" )
+		];
+
+	$.each( elements, function() {
+		var element = $( this ).first().button(),
+			buttonElement = element.button( "widget" ),
+			elementType = element.prop( "nodeName" ).toLowerCase();
+
+		if ( element.is( "input" ) ) {
+			elementType += ":" + element.attr( "type" );
+		}
+
+		element.trigger( "mousedown" );
+		ok( buttonElement.hasClass( "ui-state-active" ),
+			"[" + elementType + "] has ui-state-active class after mousedown." );
+
+		element.button( "disable" );
+		if ( element.is( "[type=checkbox], [type=radio]" ) ) {
+			ok( buttonElement.hasClass( "ui-state-active" ),
+				"Disabled [" + elementType + "] has ui-state-active class." );
+		} else {
+			ok( !buttonElement.hasClass( "ui-state-active" ),
+				"Disabled [" + elementType + "] does not have ui-state-active class." );
+		}
+	});
+});
+
 test("text false without icon", function() {
 	expect( 1 );
 	$("#button").button({
diff --git a/ui/button.js b/ui/button.js
index 247aba6e5..5d502ad51 100644
--- a/ui/button.js
+++ b/ui/button.js
@@ -260,7 +260,11 @@ $.widget( "ui.button", {
 			this.widget().toggleClass( "ui-state-disabled", !!value );
 			this.element.prop( "disabled", !!value );
 			if ( value ) {
-				this.buttonElement.removeClass( "ui-state-focus" );
+				if ( this.type === "checkbox" || this.type === "radio" ) {
+					this.buttonElement.removeClass( "ui-state-focus" );
+				} else {
+					this.buttonElement.removeClass( "ui-state-focus ui-state-active" );
+				}
 			}
 			return;
 		}