jQuery Forum

When building a widget using progressive enhancement you have the original or source element (the native html control) and then you have the generated widget element. Depending on the type of source element and the needs of the widget, sometimes these can end up being the same element. In the case of input type="checkbox", for example, they cannot, although we do leverage what we can. Let's look at this example:

You have a checkbox and its label:

1. <input type="checkbox" id="myCheckbox"><label for="myCheckbox">My Checkbox</label>

Plain old semantic HTML. Both the checkbox and the label are clickable and you can disable the checkbox by adding the disabled attribute in html.

1. <input type="checkbox" id="myCheckbox" disabled="disabled">

or with JavaScript:

1. $("#myCheckbox").attr("disabled", true);

If you transform this checkbox into a button widget by calling

1. $("#myCheckbox").button();

the widget hides the native checkbox and styles its label as a button. This widget, as all jQuery UI widgets, has a disable method, so you can now call

1. $("#myCheckbox").button("disable");

This adds the disabled visual state to the button and makes it no longer react to hover. It seems to me it should also disable clicking on the button, but it this is not the case as of 1.8rc3. Not sure if that's a bug or by design. Seems like a bug to me.

So even while your checkbox is a button there's nothing stopping you from disabling the native checkbox:

1. $("#myCheckbox").attr("disabled", true);

but this will not update the state of the label (now our button widget) to reflect the disabled functional state. Meaning you can still hover and click the button widget. It is for this I proposed that the refresh method cover this case as well. We don't have any way to get notification from the browser or from jQuery that this disabled attribute was changed, otherwise it would be a cinch, so the refresh method is our way of you telling the widget its source element has changed state and it needs to update to reflect that:

1. $("#myCheckbox").attr("disabled", true).button("refresh");

This seems a lot cleaner than destroying and recreating the button (what you'd have to do without the refresh method) or having the state of the two elements get out of sync.

Thanks for bringing this up. New ticket for the thing I mentioned above where the button only looks disabled but is still focusable and clickable: http://dev.jqueryui.com/ticket/5328

and a visual test page