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.

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
– justi, Commented Sep 25, 2011 at 11:46
'ui-state-disabled' is false, i have no idea what is wrong... — justi
– justi, Commented Sep 25, 2011 at 12:10

Ian · Accepted Answer · 2012-09-20 11:24:16Z

9

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

answered Sep 20, 2012 at 11:24

Ian

1111 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

CoqPwner Over a year ago

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.

rzur2004 · Accepted Answer · 2011-09-25 13:31:39Z

6

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' );

answered Sep 25, 2011 at 13:31

rzur2004

1395 bronze badges

Comments

marc_s · Accepted Answer · 2016-02-04 22:00:14Z

1

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.

edited Feb 4, 2016 at 22:00

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Sep 25, 2011 at 13:56

rzur2004

1395 bronze badges

Comments

Darin Dimitrov · Accepted Answer · 2011-09-25 11:39:26Z

0

To enable try like this:

$('#submit_order').removeAttr('disabled').removeClass('ui-state-disabled');

and to disable:

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

answered Sep 25, 2011 at 11:39

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

5 Comments

Darin Dimitrov Over a year ago

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

justi Over a year ago

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 Over a year ago

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 Over a year ago

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

justi Over a year ago

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

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

Comments

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related