Question

Hola, estoy tratando de actualizar el estado de un checkbox dependiendo del resultado de una petición ajax que es lanzada al hacer click sobre el mismo checkbox, actualmente tengo el código así pero no funciona.

$('#modulos input[data-role="modificador"]').on( "click", function(e){
        var peticion = $(this).is(':checked')? 'instalar' : 'desinstalar';
        var directorio = $(this).closest('tr').data('modulo');
        $.ajax({
            url: '../'+directorio+'/instalador.php',
            type: 'POST',
            async: true,
            dataType: 'json',
            data: {
                peticion : peticion,
                directorio: directorio
            },
            success: function(data){
                if(data.estado == "instalado"){
                    $(this).prop('checked', true);
                }else{
                    $(this).prop('checked', false);                 
                }
            },
            beforeSend: function(){
                $emergente.fadeIn(200);
            },
            complete: function(){
                $emergente.fadeOut(200);
            }
       });
});

y la idea es que cuando en el success el data.estado sea diferente de "instalado" no cambie el estado del checkbox. Gracias de antemano.

Answer 1

Hola @YennyDelgado, el contexto del callback success es diferente, debes establecer this a una variable previamente, enviarla como propiedad de $.ajax o establecer el contexto en $.ajax.

intenta definir el contexto de esta forma:

$.ajax({
    context: this, // establecemos el contexto

---

tu codigo queda asi:

$('#modulos input[data-role="modificador"]').on( "click", function(e){
        var peticion = $(this).is(':checked')? 'instalar' : 'desinstalar';
        var directorio = $(this).closest('tr').data('modulo');
        $.ajax({
            context: this,
            url: '../'+directorio+'/instalador.php',
            type: 'POST',
            async: true,
            dataType: 'json',
            data: {
                peticion : peticion,
                directorio: directorio
            },
            success: function(data){
                if(data.estado == "instalado"){
                    $(this).prop('checked', true);
                }else{
                    $(this).prop('checked', false);                 
                }
            },
            beforeSend: function(){
                $emergente.fadeIn(200);
            },
            complete: function(){
                $emergente.fadeOut(200);
            }
       });
});

---

jquery Ajax #context option
El valor de this en Javascript: cómo manejarlo correctamente
this - Javascript | mozilla MDN