Button disable and enable not working in Jquery

Question

I have a Jquery for click a button to add items to list.here I need to disable the button after click on it and after success it will be enable.here is my Code

$(".addtowishlist").live("click", function (e) {
        var t = $(this);
        $('<img src="/images/loading.gif" alt="loading" id="ajax-loader-wish"/>').insertAfter(t);
        $("#simplemodal-overlay").unbind("click");
        var n = t.parent().find("select[name='code']").val();

        var i = t.parent().find("input:hidden[name='account']").val();
        var s = t.parent().find("input:hidden[name='itemname']").val();
        var o = t.parent().find("input:hidden[name='itemnumber']").val();
        var u = (new URI).addQuery("code", n).addQuery("qty", 0).addQuery("addtowishlist", true).addQuery("account", i).addQuery("itemname", s).addQuery("itemnumber", o);
        $.ajax({
            url: u,
            type: "GET",
            success: function (e) {
                t.closest(".innerwishlist").hide();
                $(".wishlistThankYou").show()
            }
        });
        return false
    });

I tried

$(".addtowishlist").attr('disabled', 'disabled'); 
and code for enable 

 $(".addtowishlist").attr('disabled', '');

its works and disable the button but it doesn't enable the button after success. anybody help ?

Unrelated: `.live()` is deprecated, and removed in jQuery 1.9. Convert to `.on()`. — Barmar, May 20 '13 at 06:36
possible duplicate of [jQuery to disable button not work](http://stackoverflow.com/questions/8707423/jquery-to-disable-button-not-work) — Barmar, May 20 '13 at 06:37
+1 Agree with @Barmar that `.live()` is no longer supported. — NullPointer, May 20 '13 at 06:38

score 5 · Accepted Answer · answered May 20 '13 at 06:35

5

It is recommended to use .prop instead:

$(".addtowishlist").prop('disabled', true); 
$(".addtowishlist").prop('disabled', false);

Or if you use old version of jQuery, use $(".addtowishlist").removeAttr("disabled"); to remove the attribute.

answered May 20 '13 at 06:35

xdazz

154,648
35
237
264

@xdazz..why `prop` instead of `attr`? – Olrac May 20 '13 at 07:11
@OlracVaizard According to the W3C forms specification, the disabled attribute is a boolean attribute. – xdazz May 20 '13 at 07:27

score 4 · Answer 2 · answered May 20 '13 at 06:35

4

$(".addtowishlist").attr('disabled', true); 
and code for enable 

 $(".addtowishlist").attr('disabled', false);

answered May 20 '13 at 06:35

Vond Ritz

2,022
13
15

score 1 · Answer 3 · answered May 20 '13 at 06:36

1

try this:

$(".addtowishlist").removeAttr("disabled");

answered May 20 '13 at 06:36

Larry McKenzie

3,193
24
22

score 0 · Answer 4 · answered Mar 02 '15 at 12:24

0

If the button is itself a jQuery styled button (with .button()) you will need to refresh the state of the button so that the correct classes are added / removed.

$( ".selector" ).button( "refresh" );

answered Mar 02 '15 at 12:24

Tom Chamberlain

2,800
19
20

score 0 · Answer 5 · answered Feb 13 '17 at 07:31

If you are using jQuery version 1.6+, then

$(".addtowishlist").prop( "disabled", true);

is recommended to disable the field. And for enabling use

$(".addtowishlist").prop( "disabled", false );

For older jQuery versions use below for disabling

$(".addtowishlist").attr('disabled', 'disabled');

and below one for enabling.

$(".addtowishlist").removeAttr('disabled');

Button disable and enable not working in Jquery

5 Answers5