Toggle disabled property using jQuery's prop() doesn't work

Question

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?

Answer 1

Instead of

.removeProp('disabled')

use

.prop('disabled',false)

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

Answer 2

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)

Answer 3

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 :)