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

Answer 1

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'); 
      }  

Answer 2

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;
    });
});

Answer 3

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.