jQuery实现两个复选框选中互斥添加disabled类的代码求助

现有代码的核心错误 #

• 选择器对应关系完全错位：你给外层容器设置的类名，和内部包裹的复选框id是交叉关系——类名为newmobile的div内部放的是id为b_mobnr的复选框，类名为b_mobnr的div内部放的是id为newmobile的复选框。之前的代码顺着类名和id的对应关系选元素，实际操作的是当前复选框自身所在的容器，根本没选中对面的目标元素，自然没法实现互相禁用的效果。
• 事件默认行为被错误阻断：你在label的点击事件里加了ev.preventDefault()，会直接阻断label和关联input的默认联动逻辑——正常点击label本来会自动切换对应input的选中状态，被这么拦截后，input的checked状态永远不会随点击变化，后面判断选中状态的分支逻辑根本触发不了。
• 逻辑缺失回退分支：两个函数都只写了“选中时添加disabled类”的逻辑，完全没有处理“取消选中时移除disabled类”的场景，哪怕选择器写对了，用户取消勾选后disabled状态也不会自动恢复。
• 分支判断写反对象：比如处理newmobile复选框的函数里，判断到当前复选框id为newmobile时，给.b_mobnr容器加disabled——这个容器恰恰就是newmobile复选框自己所在的父级，目标选择完全错误。

修复后的单函数实现 #

不需要写两个重复的处理函数，把通用逻辑合并成一个函数，通过toggleClass自动根据选中状态控制类的增删即可，示例代码：

function handleCheckboxToggle(ev) {
    const currentInput = $(ev.currentTarget).siblings("input");
    const isChecked = currentInput.is(":checked");
    // 根据当前点击的复选框，定位到对面选项的容器
    const targetContainer = currentInput.attr("id") === "b_mobnr"
        ? $(".b_mobnr .circle-buttons") // 选了b_mobnr，要禁用对面在.b_mobnr容器里的newmobile选项
        : $(".newmobile .circle-buttons"); // 选了newmobile，要禁用对面在.newmobile容器里的b_mobnr选项
    
    // 根据选中状态自动切换disabled类
    targetContainer.toggleClass("disabled", isChecked);
}

对应的HTML里，把两个label的点击事件都绑定这个统一函数即可：

<label for="b_mobnr" onclick="handleCheckboxToggle(event)">Mobile Option</label>
<label for="newmobile" onclick="handleCheckboxToggle(event)">Newmobile Option </label>

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