使用jQuery实现指定复选框的互斥启用与禁用功能

我来帮你搞定这个复选框互斥的问题！你遇到的核心问题应该是之前的代码只处理了勾选时禁用对方的逻辑，却没覆盖取消勾选时重新启用对方的场景。下面是完整的实现方案：

首先，我们可以基于你的HTML结构，通过JavaScript监听复选框的change事件，实现双向的状态控制：

完整代码示例 #

<form>
  <input type="checkbox" name="product[]" value="one"> One
  <input type="checkbox" name="product[]" value="two"> Two
  <input type="checkbox" name="product[]" value="three"> Three
  <input type="checkbox" name="product[]" value="four"> Four
</form>

<script>
// 获取需要互斥的两个复选框元素
const checkboxOne = document.querySelector('input[value="one"]');
const checkboxTwo = document.querySelector('input[value="two"]');

// 定义状态切换的处理函数
function handleMutualToggle() {
  // 根据当前复选框的状态，控制另一个的禁用状态
  if (this.checked) {
    // 勾选时，禁用对方
    const target = this.value === 'one' ? checkboxTwo : checkboxOne;
    target.disabled = true;
  } else {
    // 取消勾选时，重新启用对方
    const target = this.value === 'one' ? checkboxTwo : checkboxOne;
    target.disabled = false;
  }
}

// 给两个互斥复选框绑定change事件
checkboxOne.addEventListener('change', handleMutualToggle);
checkboxTwo.addEventListener('change', handleMutualToggle);
</script>

逻辑说明 #

• 我们通过querySelector精准选中value为one和two的复选框
• 给两个复选框绑定change事件，每次状态变化时触发处理函数
• 处理函数中：
  • 如果当前复选框被勾选，则禁用另一个复选框
  • 如果当前复选框被取消勾选，则移除另一个复选框的禁用状态
• 剩下的three和four复选框不受影响，正常运行

这样就能完美实现你要的互斥效果啦！

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