22

First, the fiddle.

$('#enableButtonB').click(function (e) {
   if($(e.target).is(':checked'))
   {
       $('#myButtonB').removeProp('disabled');
       alert('Enable Button B');
   }
   else
   {
       $('#myButtonB').prop('disabled', true); 
       alert('Disable Button B');
   }
});

I'm trying to use jQuery's .prop() and removeProp() methods to enable and disable a button based on some criteria. It seems to work fine until removeProp() is called on the element. After that any subsequent calls to prop() fail to disable to button.

What's the proper way to enable and disable an element repeatedly?

9
  • 8
    $('element').prop('disabled', true/false) where you use true if you want it to be disabled, or false if you want it enabled.
    – Ohgodwhy
    Commented Jun 6, 2012 at 18:18
  • Your fiddle works fine for me on FF12.
    – js1568
    Commented Jun 6, 2012 at 18:19
  • Why don't you use .attr() and .removeAttr() instead of .prop() and .removeProp() Commented Jun 6, 2012 at 18:22
  • 7
    The jQuery docs are great api.jquery.com/removeProp says : "Note: Do not use this method to remove native properties such as checked, disabled, or selected. This will remove the property completely and, once removed, cannot be added again to element. Use .prop() to set these properties to false instead." Commented Jun 6, 2012 at 18:22
  • @iambriansreed Very good to know. Thanks for the heads up. I'll definitely be more careful with removeProp() in the future. Commented Jun 6, 2012 at 18:25

4 Answers 4

26

Instead of

.removeProp('disabled')

use

.prop('disabled',false)

Fiddle: http://jsfiddle.net/kqnZz/6/

3
  • @iambriansreed It's an improper example anyway. Commented Jun 6, 2012 at 18:23
  • Those were intentionally left in, @iambriansreed. But if you insist: jsfiddle.net/kqnZz/8 Commented Jun 6, 2012 at 18:40
  • 2
    I'm randomly coming across this question/answer looking for something else (and I see that it is somewhat old), but an explanation as to why this change is required would be helpful. From jQuery's documentation (api.jquery.com/removeProp), "Note: Do not use this method to remove native properties such as checked, disabled, or selected. This will remove the property completely and, once removed, cannot be added again to element. Use .prop() to set these properties to false instead."
    – MandM
    Commented Apr 15, 2015 at 16:53
17

First, http://jsfiddle.net/iambriansreed/KxGVa/

The jQuery docs are great. removeProp says:

Note: Do not use this method to remove native properties such as checked, disabled, or selected. This will remove the property completely and, once removed, cannot be added again to element. Use .prop() to set these properties to false instead.

Change:

.removeProp('disabled')

...to...

.prop('disabled', false)

...and...

.prop('disabled', 'disabled')

...to...

.prop('disabled', true)
0
6

Try if this short function solves your needs:

$("#enableButtonB").click(function(){
  $("#myButtonB").prop('disabled', function (_, val) { return ! val; });
});

Creds to user Explosion Pills for that sweet function :)

0
2

This line will act as toggle disabled function:

$('#myButtonB').prop('disabled', !$('#myButtonB').prop('disabled'));

If you use it inside a jquery function you can use it like:

$('#enableButtonB').on('click', function() {
     $('#myButtonB').prop('disabled', !$('#myButtonB').prop('disabled'));
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.