Disable jQueryUI button and keep its original layout/style

Question

If I disable jQueryUI button using "disabled" option, button goes dim. But I don't want it that way - I just want it unresponsive and styled in its original layout - no rollovers, no clicks - everything dead.

Unbinding button click from button doesn't help. Unbinding all events from button using unbind() just as well.

Any ideas?

Answer 1

In fact, you could just remove the "disabled" classes after disabling the button:

$( "button" ).button();

$( "button" ).button('disable');

$( "button" ).removeClass('ui-button-disabled ui-state-disabled')

Here is a fiddle : http://jsfiddle.net/9gq9n/

Answer 2

Ok, at last I figured it out. To disable any jQueryUI button, including 'buttonized' checkbox with label attached (while retaining its original layout), you have to do the following:

• unbind its events
• unbind events from its label(s)

So, here's an example:

$("mybuttons").unbind();
$("mybuttons").getLabels().unbind();

I'm using a plugin I recently wrote (originally by SO member Gijs, but didn't work always...)

jQuery.fn.getLabels = function () {
    return this.map(function () {
        var parentLabels = $(this).parents('label').get();
        var associatedLabels = this.id ? associatedLabels = $("label[for='" + this.id + "']").get() : [];
        return parentLabels.concat(associatedLabels);
    });
};

Hope it helps.