jQuery Remove attribute in ajax

Question

I have an ajax call that I disable a checkbox and I then want to enable again once the ajax has finished. However I cannt remove the attribute disabled aterwards.

$(function(){ // added
    $("input:checkbox").live("click", function(){

        var a_href = $(this).attr('id');
        var checked = $(this).attr('checked');
        if (checked == 'checked') {
            checked = 1;
        }else {
            checked = 0
        };

        $(this).parent().parent().after('<img class="loader" style="padding-botton:0 !important;" alt="" src="images/loaders/loader.gif">');
        $(this).attr('disabled','disabled');

        $.ajax( {
            type: "POST",
            url: "includes/featured.php",
            data: { id: a_href, value: checked, field: "main_feature" },
          success: function(data) {
            $('img.loader').fadeOut('slow',function(){$(this).remove()});
            $(this).removeAttr('disabled'); 
          }             
        }).done(function (data){
            }
        );

    return false; 


    });
}); // added

I have also tried:

.attr('disabled', false);

gdoron · Accepted Answer · 2012-05-01 19:41:14Z

6

You need to save a reference to this because this inside ajax callback is the ajax request.

$("input:checkbox").live("click", function(){
    var $this = $(this);
    ...
    ...
    success: function(data) {
        $('img.loader').fadeOut('slow',function(){$(this).remove()});
        $this.removeAttr('disabled');

or set the context to this:

    $.ajax( {
        type: "POST",
        context: this, // <===============
        url: "includes/featured.php",
        data: { id: a_href, value: checked, field: "main_feature" },
      success: function(data) {
          // Now this is the checkbox!
        $('img.loader').fadeOut('slow',function(){$(this).remove()});
        $(this).removeAttr('disabled'); 
      }

edited May 1, 2012 at 19:41

answered May 1, 2012 at 19:35

gdoron

151k59 gold badges302 silver badges376 bronze badges

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

Comments

Rory McCrossan · Accepted Answer · 2012-05-01 19:36:51Z

this in the AJAX success handler will not be the checkbox. You'll need to cache that variable first, then you can use it in the success handler. It's also worth noting that it's better to use prop or removeProp when removing attributes. Try this:

$(function(){ // added
    $("input:checkbox").live("click", function(){
        var $checkbox = $(this);

        var a_href = $checkbox.attr('id');
        var checked = $checkbox.attr('checked');
        checked = (checked == "checked") ? 1 : 0;

        $checkbox.parent().parent().after('<img class="loader" style="padding-botton:0 !important;" alt="" src="images/loaders/loader.gif">');
        $checkbox.attr('disabled','disabled');

        $.ajax( {
            type: "POST",
            url: "includes/featured.php",
            data: { id: a_href, value: checked, field: "main_feature" },
            success: function(data) {
                $('img.loader').fadeOut('slow',function(){$(this).remove()});
                $checkbox.removeProp('disabled'); 
            }             
        }).done(function (data) {});

        return false;
    });
});

CambridgeMike · Accepted Answer · 2012-05-01 19:34:28Z

2

I don't think 'this' inside the success function is what you think it is. Try setting a variable outside the ajax scope for your checkbox, and then referencing that inside the success function.

answered May 1, 2012 at 19:34

CambridgeMike

4,6421 gold badge31 silver badges38 bronze badges

1 Comment

raddrick Over a year ago

is right $(this).removeAttr('disabled'); this doesnt refer to the checkbox anymore..you'd have to say something like... $('#checkbox1').removeAttr('disabled');

SenorAmor · Accepted Answer · 2012-05-01 19:35:36Z

2

Your $(this) is out of scope when you try to re-enable your checkbox.

Add var newthis = $(this) after

$("input:checkbox").live("click", function(){

and change your call to remove the 'disabled' attr to

newthis.removeAttr('disabled');

answered May 1, 2012 at 19:35

SenorAmor

3,34518 silver badges27 bronze badges

Collectives™ on Stack Overflow

jQuery Remove attribute in ajax

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related