What am I missing about jquery, aria-disabled, and the :disabled selector?

Question

Using lines such as

$('#myButton').button({ 'disabled' : true });

I would expect this to match the ':disabled' CSS selector, but it does not. The button is clearly disabled, but it has the following properties:

class="button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-button-disabled ui-state-disabled" role="button" aria-disabled="true">

I gather that this aria-disabled thing is an IE vendor prefix unrelated, but why doesn't it have regular old "disabled"? Have I done something wrong here? I gather from the classes that we're using jQuery UI, which I know very little about (I'm hunting bugs in someone else's code).

Answer 1

If button isn't being called on a form element, :disabled won't select it.

From the docs:

The :disabled selector should only be used for selecting HTML elements that support the disabled attribute (<button>, <input>, <optgroup>, <option>, <select>, and <textarea>).

If it's being used, for example, to style an <a> tag, you'll have to select for one of the ui- classes, e.g. ui-state-disabled.

Answer 2

Maybe try using the attr() function and giving it the value of disabled since I am not aware whether or not disabled=true works.

$('#myButton').attr('disabled', 'disabled');