jQuery：点击复选框时取消选中其余所有复选框

我明白你想要实现的交互效果了——当勾选第9、10、11这三个特定复选框中的任意一个时，自动取消其他所有复选框的选中状态，同时把它们禁用；如果取消勾选这三个复选框中的某一个，其他复选框要恢复可选择状态。下面是调整后的完整代码，我会拆解一下逻辑：

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(function () {
    // 先获取页面上所有的复选框元素，方便后续复用
    const allCheckboxes = $("input[type='checkbox']");
    
    // 给所有复选框绑定状态改变事件
    allCheckboxes.change(function () {
        const $currentCheckbox = $(this);
        // 注意：jQuery的索引是从0开始计数的，所以第9个对应索引8，第10个9，第11个10
        const targetCheckboxIndexes = [8, 9, 10];
        
        // 检查当前触发事件的复选框是否是我们要处理的那三个
        if (targetCheckboxIndexes.includes(allCheckboxes.index($currentCheckbox))) {
            if ($currentCheckbox.is(':checked')) {
                // 如果当前复选框被勾选了：
                // 1. 排除当前复选框，选中其他所有复选框
                // 2. 取消它们的选中状态
                // 3. 禁用这些复选框
                allCheckboxes.not($currentCheckbox)
                    .prop('checked', false)
                    .prop('disabled', true);
            } else {
                // 如果当前复选框被取消勾选了，恢复所有复选框的可选择状态
                allCheckboxes.prop('disabled', false);
            }
        }
    });
});
</script>

关键逻辑说明： #

• 索引对应关系：因为jQuery的.index()方法返回的是元素在集合中的位置（从0开始），所以第9个复选框对应索引8，第10个对应9，第11个对应10，这个要注意别搞混。
• 批量操作：用.not($currentCheckbox)快速排除当前勾选的复选框，然后一次性修改其他复选框的checked和disabled属性，比逐个操作更高效。
• 反向恢复：增加了取消勾选时的恢复逻辑，这样用户如果误选了目标复选框，取消后还能重新选择其他选项，交互更友好。

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