jQuery开发：实现obsolete与pending复选框互斥禁用的功能问题

我来帮你修复这个复选框互斥禁用的逻辑问题，先看看原代码里的几个关键问题，再给你完整的解决方案：

原代码的问题点 #

• 事件绑定错误：你写的$("input.obsolete").click(toggle_checkbox());会立即执行toggle_checkbox函数，而不是把它作为点击事件的处理程序，应该去掉括号，传入函数引用
• 选中状态判断错误：jQuery对象没有.checked属性，要判断复选框是否选中，应该用.is(':checked')方法（或者原生DOM的.checked，但需要先取到DOM元素）
• 属性操作不规范：对于disabled这种布尔类型的属性，jQuery更推荐用.prop()方法来设置/移除，而不是.attr()或.removeAttr()，后者在一些场景下会有兼容性问题
• 逻辑不完整：原代码只处理了obsolete选中的情况，没考虑pending选中时要禁用obsolete的场景

修正后的完整代码 #

$(document).ready(function(){
    // 绑定点击事件，注意不要加括号
    $("input.obsolete").click(toggle_checkbox);
    $("input.pending").click(toggle_checkbox);
});

function toggle_checkbox() {
    // 获取两个复选框的选中状态
    const isObsoleteChecked = $('input.obsolete').is(':checked');
    const isPendingChecked = $('input.pending').is(':checked');

    // 逻辑：如果任意一个被选中，禁用另一个；否则都启用
    $("input.pending").prop("disabled", isObsoleteChecked);
    $("input.obsolete").prop("disabled", isPendingChecked);
}

代码解释 #

1. 事件绑定：去掉函数后的括号，确保点击事件触发时才执行toggle_checkbox
2. 状态判断：用.is(':checked')准确获取复选框的选中状态，返回布尔值
3. 属性控制：用.prop("disabled", 布尔值)来设置禁用状态，布尔值为true时禁用，false时启用
4. 完整逻辑：同时处理两个复选框的状态，不管选中哪一个，另一个都会被禁用；当取消任意一个的选中状态时，两个都会恢复可用

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