jQuery-ui: enabling disabled button doesn't restore event

Question

I have a problem: after enable button, it look like enabled but isn't clickable. (reloading page fix this problem, but i won't do it). Firstly, on (document).ready, i disable this button.

For enable i do:

$("#submit_order").attr('disabled', false).removeClass( 'ui-state-disabled' );

for disable:

$("#submit_order").attr('disabled', true).addClass( 'ui-state-disabled' ); 

HTML code:

<button id="submit_order">Send an order</button> 

button jQuery code:

$( "#submit_order" )
    .button()
    .click(function() {
          $( "#dialog-form" ).dialog( "open" );
});

When i clicked this button after enabling, code above didn't invoke.

Solution 1

When You are writing

$("#submit_order").attr(...)

it means that you use stanadard attributes.

You are inconsistent: once You are using mentioned above method, and another time you are writing:

$( "#submit_order" ).button().....

try this:

$("#submit_order").button().attr('disabled', false).removeClass( 'ui-state-disabled' );

$("#submit_order").button().attr('disabled', true).addClass( 'ui-state-disabled' );

Solution 2

Yes, previous answers may work for you, but for me the events weren't firing when I "re-enabled" the button with .removeAttr("disabled") and using .removeClass("ui-state-disabled").

The official answer appears to be

$(".selector").button("option", "disabled", true);

to disable, and

$(".selector").button("option", "disabled", false);

to enable a jQueryUI button()

from http://jqueryui.com/demos/button/#option-disabled

Solution 3

As I remember jQueryUI extends jQuery library by providing different components where most of them have methods enable() and disable().

You may try alternative (IMHO more preferred) way:

$('#submit_order').button().enable();
   and
$('#submit_order').button().disable();

this will free Your mind from manual managing attributes - JQUI do this self. This is powerful, because you may create buttons using different underlying elements (so that enabling and disabling them will use different methods) ex. Standard button uses attribute disabled="disabled" (browser implementation - standard)

But button made from anchor doesn't support this at all.

Comments

[justi]

My "enabled" button: <button id="submit_order" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-disabled ui-button-text-only" role="button" aria-disabled="true">

[justi]

'ui-state-disabled' is false, i have no idea what is wrong...

[justi]

$("#submit_order").is(':disabled') is false too :/

[Darin Dimitrov]

@justi, could you show your entire script? How/where are you invoking those functions?

[justi]

Developer server: dev.academis.sites.djangoeurope.com when U click a "basket" in accordion, "send an order" button enabling but it isn't clickable, i enable with code above, do not doing anything else

[Darin Dimitrov]

The code that is supposed to do the removeAttr() call doesn't seem to be executed at all because when you inspect the DOM with FireBug the button still has the disabled attribute on it.

[Darin Dimitrov]

@justi, the standard thing every developer should do: debug his code, see what happens and why it doesn't enter this method.

[justi]

After enabling: $("#submit_order").hasClass('ui-state-disabled') is False. Maybe i use bad class name: 'ui-state-disabled' for enabling ?

[CoqPwner]

This is indeed the best answer, it's the only one that appears to correctly add or remove both the disabled and the aria-disabled AND also add or remove both the ui-state-disabled and ui-button-disabled classes for me.