JQuery Ajax的fail函数中无法修改Checkbox状态的问题求助

你遇到的核心问题是Ajax回调函数（fail）里的this指向发生了变化——它不再是触发change事件的Checkbox元素，而是jQuery的jqXHR对象或Ajax配置对象，所以即便你打印时看起来有值，实际操作的并不是目标Checkbox。

下面是三种可行的解决方法：

方案1：提前保存Checkbox的引用 #

在change事件回调开头，把当前Checkbox的jQuery对象存起来，后续直接用这个引用操作：

$('.checkbox').on('change', function () {
    let $checkbox = $(this); // 保存当前元素的引用
    let checked = $checkbox.is(':checked');

    var jqxhr = $.ajax({
        // ajax parameters
    })
    .done(function () {
    })
    .fail(function () {
        $checkbox.prop('checked', !checked); // 使用保存的引用修改状态
    })
});

方案2：使用ES6箭头函数 #

箭头函数不会绑定自身的this，会继承外层作用域的this（也就是change事件里的Checkbox元素）：

$('.checkbox').on('change', function () {
    let checked = $(this).is(':checked');

    var jqxhr = $.ajax({
        // ajax parameters
    })
    .done(function () {
    })
    .fail(() => { // 替换为箭头函数
        $(this).prop('checked', !checked);
    })
});

方案3：设置Ajax的context选项 #

在Ajax配置里指定context为当前Checkbox，强制回调里的this指向它：

$('.checkbox').on('change', function () {
    let checked = $(this).is(':checked');

    var jqxhr = $.ajax({
        // ajax parameters
        context: this // 指定上下文为当前Checkbox元素
    })
    .done(function () {
    })
    .fail(function () {
        $(this).prop('checked', !checked);
    })
});

之所以把代码放在fail函数外能正常工作，是因为在change事件的直接作用域里，this仍然指向Checkbox元素；但进入Ajax的异步回调后，上下文已经发生了改变，这才导致状态修改失效。

内容的提问来源于stack exchange，提问作者pileup