How to enable a button with JavaScript or jQuery

Question

I am able to successfully disable a button with below syntax .

$("#list *").attr("disabled", "disabled").off('click');

However I also need to enable the button at the end of my function.Any pls help me here how to do this.

refer to namespacing for using on and off events, plus why do you need off() when you have disabled attribute? It's not necessary... — Bhojendra Rauniyar
– Bhojendra Rauniyar, Commented Sep 7, 2014 at 16:52
Remove the .off("click") so just the attr("disabled", "disabled") is there. To re-enable do removeAttr("disabled"). That's a horrible selector btw, do something like $("#list button") — Joseph Lennox
– Joseph Lennox, Commented Sep 7, 2014 at 16:53
You should provide a JS fiddle. People have answered your question correctly, but there's an issue outside of what's shown to us. We can help you if you post a fiddle. — Joseph Lennox
– Joseph Lennox, Commented Sep 7, 2014 at 22:10

Wolfgang Stengel · Accepted Answer · 2014-09-07 16:55:34Z

3

Don't use the attribute to disable the field. Use the property of the DOM element. To disable:

$("#list *").prop("disabled", true);

To re-enable:

$("#list *").prop("disabled", false);

answered Sep 7, 2014 at 16:55

Wolfgang Stengel

2,8561 gold badge19 silver badges22 bronze badges

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

1 Comment

T J Over a year ago

Probably OP has to rebind the click handler as well :D

Community · Accepted Answer · 2017-05-23 11:57:16Z

1

The .off() method removes event handlers that were attached with .on()

If you remove the event handler while you are disabling the button, even if you enable it later, it doesn't have the event handler anymore so clicking it won't trigger whatever functionality it had previously. Else you'll have to rebind the event handler as well after enabling it.

Simply disabling the button will prevent it from working, You don't have to remove the click handler at all.

You can disable the button using $("#list *").prop("disabled", true); and enable it using $("#list *").prop("disabled", false); as wolfgang Stengel mentioned in his answer

edited May 23, 2017 at 11:57

CommunityBot

11 silver badge

answered Sep 7, 2014 at 17:07

T J

43.2k13 gold badges87 silver badges142 bronze badges

Comments

I_Debug_Everything · Accepted Answer · 2014-09-08 06:36:07Z

0

Try removing the disable property completely.

$('#list').removeAttr('disabled');

Demo fiddle

Update
One more thing, setting disabled to true,false,undefined etc doesn't do anything. You can check this by simply adding a disable attribute to an element(without passing it anything) and will keep it disabled forever

Updated fiddle

Update 2
As mentioned above, following fiddle describes the affects of passing 'true,false,undefined` in the disable attribute.

Example

edited Sep 8, 2014 at 6:36

answered Sep 7, 2014 at 17:33

I_Debug_Everything

3,8465 gold badges39 silver badges49 bronze badges

3 Comments

T J Over a year ago

"setting disabled to true,false,undefined etc doesn't do anything" - totally wrong.

I_Debug_Everything Over a year ago

@TJ why do you think so? I've added a fiddle demonstrating what i meant.

T J Over a year ago

The statement quoted above is wrong. check the other answers which sets disabled to true and false. BTW attr is not the preferred way to alter property values...

Collectives™ on Stack Overflow

How to enable a button with JavaScript or jQuery

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related