Button won't re-enable it self using jQuery

Question

I can't figure out why my button won't re-enable when another button is clicked. Any help will be most appreciated

My code is as follows:

$(document).ready(function() {
    $('#btnAdd').click(function() { 
        // enable the "remove" button
        $('#btnDele').attr('disabled','');
    }
});

demo here: http://jsfiddle.net/ATzBA/2/

try using removeAttr() instead of setting the attribute's value to an empty string — MrOBrian, Jun 25 '12 at 20:48
@MrOBrian Don't use `removeAttr` on native properties, because once you do, they're gone and you cant work with them again till DOM refresh. — Ohgodwhy, Jun 25 '12 at 20:50
@Ohgodwhy I've used `removeAttr` before for just this purpose and it works great in all browsers I've tested. If the element needs to be disabled again, a simple `attr('disabled', 'disabled')` adds the property back to the element — MrOBrian, Jun 25 '12 at 20:55

Waltzy · Accepted Answer · 2012-06-25T22:02:01.267

4

 $('#btnDele').attr('disabled',false);

should do the trick.

edited Jun 25 '12 at 22:02

answered Jun 25 '12 at 20:48

Waltzy

1,113
4
14
31

score 3 · Answer 2 · answered Jun 25 '12 at 20:50

3

You could also try $("#btnDele").removeAttr('disabled');

answered Jun 25 '12 at 20:50

johnmadrak

840
5
7

score 3 · Answer 3 · answered Jun 25 '12 at 20:54

3

The prop function is the correct way to do this in JQuery.

$('#btnDele').prop('disabled', false); //enabled
$('#btnDele').prop('disabled', true); //disabled
$('#btnDele').prop('disabled'); //returns true if disabled, false if enabled.

See documentation here.

answered Jun 25 '12 at 20:54

jaypeagi

3,133
18
33

+1 for using prop. Don't forget to mention it's for jQuery 1.6+ – wirey00 Jun 25 '12 at 21:03
Cheers @wirey - forgot it was a recent addition! – jaypeagi Jun 25 '12 at 21:05

score 2 · Answer 4 · edited May 23 '17 at 12:23

2

The "disabled" attr has to be removed completely, not just set to null/an empty string. You need to use jQuery's removeAttr():

$(function(){
     $('#btnAdd').click(function(e){
          $(this).removeAttr('disabled');
      });
 });

Somebody talks about it/browser compatibility issues here: Toggle input disabled attribute using jQuery

edited May 23 '17 at 12:23

Community

1
1

answered Jun 25 '12 at 20:50

bokonic

1,751
10
12

score 0 · Answer 5 · answered Jun 25 '12 at 20:48

0

Instead of using the .attr function I'd use Jquery UI and use $('#btnDele').button("enable"); http://docs.jquery.com/UI/Button#methods

answered Jun 25 '12 at 20:48

Alex Unger

180
2
9

score 0 · Answer 6 · answered Jun 25 '12 at 20:55

0

$(document).ready(function() { $('#btnAdd').click(function() {

        // to enable the "remove" button
        // set 'disabled to false'
        $('#btnDele').attr('disabled','false');

}); });

answered Jun 25 '12 at 20:55

haroonxml

356
1
3
14

Button won't re-enable it self using jQuery

6 Answers6