如何通过prop修改checkbox状态时阻止触发change事件？

下面提供几种实用的解决办法：

方法1：临时解绑再重新绑定事件 #

修改checkbox状态前，先移除它的change事件监听，完成状态更新后再重新绑定：

$('select').on('change', function() {
    $.ajax({
        // 执行AJAX加载值的操作
        success: function (data) {
            const $statusBox = $('input[name=status]');
            // 先解绑change事件
            $statusBox.off('change');
            // 更新checkbox状态
            $statusBox.prop('checked', data.checked);
            // 重新绑定原有的change事件逻辑
            $statusBox.on('change', function() {
                $.ajax({
                    // 原AJAX更新操作
                    success: function (data) {
                        // 显示提示
                    }
                })
            });
        }
    })
});

方法2：用标志位控制事件执行逻辑 #

设置一个标志变量，通过代码修改状态时标记，让checkbox的change事件根据标志跳过执行：

// 定义标志位，标记是否是通过选择框触发的状态更新
let isSelectTriggeredUpdate = false;

// Checkbox变更事件处理
$('input[name=status]').on('change', function() {
    // 如果是选择框触发的更新，跳过逻辑并重置标志
    if (isSelectTriggeredUpdate) {
        isSelectTriggeredUpdate = false;
        return;
    }
    $.ajax({
        // 执行AJAX更新操作
        success: function (data) {
            // 显示提示
        }
    })
});

// 选择框变更事件处理
$('select').on('change', function() {
    $.ajax({
        // 执行AJAX加载值的操作
        success: function (data) {
            // 设置标志位
            isSelectTriggeredUpdate = true;
            // 更新checkbox状态
            $('input[name=status]').prop('checked', data.checked);
        }
    })
});

方法3：直接修改DOM原生属性（不推荐） #

直接操作DOM元素的checked属性，这种方式不会触发change事件，但不符合jQuery的最佳实践，仅作参考：

// 获取DOM元素直接修改
$('input[name=status]')[0].checked = data.checked;

推荐优先使用方法2，代码更简洁易维护，也能避免重复绑定事件的麻烦。

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