如何通过JavaScript等方式限制用户同时选中特定组合的复选框

实现方案 #

完全可以通过JavaScript实现指定复选框的组合互斥限制，以下是基于你现有代码调整后的可直接使用的实现：

你原有jQuery代码的选择器和现有HTML的复选框name属性不匹配，需要先调整选择器逻辑，针对value为Bike和Boat的两个选项做互斥判断，同时保留你原本需要的最大可选数量限制：

jQuery版本实现

$(document).ready(function () {
  // 选中所有车辆相关复选框
  const $vehicleChecks = $("input[name^='vehicle']");
  // 定义需要互斥的选项value
  const mutexValues = ['Bike', 'Boat'];
  // 最大可选数量，保留你原有需求
  const maxAllowed = 2;

  $vehicleChecks.change(function () {
    // 原有最大数量限制逻辑
    const checkedCnt = $vehicleChecks.filter(":checked").length;
    if (checkedCnt > maxAllowed) {
      $(this).prop("checked", false);
      alert(`你最多只能选择${maxAllowed}个选项！`);
      return;
    }

    // 新增Bike和Boat互斥逻辑
    const currentVal = $(this).val();
    // 仅当当前选中的是互斥组内的选项时做校验
    if (mutexValues.includes(currentVal) && $(this).is(":checked")) {
      // 找到互斥组内另一个选项
      const otherVal = mutexValues.find(val => val !== currentVal);
      const $otherCheck = $vehicleChecks.filter(`[value="${otherVal}"]`);
      // 如果另一个选项已经被选中，取消本次选中操作并提示
      if ($otherCheck.is(":checked")) {
        $(this).prop("checked", false);
        alert("Bike和Boat不能同时选中！");
      }
    }
  });
});

原生JavaScript实现（无需依赖jQuery）

如果不想引入jQuery依赖，也可以用原生JS实现相同效果：

document.addEventListener('DOMContentLoaded', function() {
  const vehicleChecks = document.querySelectorAll("input[name^='vehicle']");
  const mutexValues = ['Bike', 'Boat'];
  const maxAllowed = 2;

  vehicleChecks.forEach(check => {
    check.addEventListener('change', function() {
      // 最大数量限制逻辑
      const checkedCnt = Array.from(vehicleChecks).filter(c => c.checked).length;
      if (checkedCnt > maxAllowed) {
        this.checked = false;
        alert(`你最多只能选择${maxAllowed}个选项！`);
        return;
      }

      // 互斥逻辑
      const currentVal = this.value;
      if (mutexValues.includes(currentVal) && this.checked) {
        const otherVal = mutexValues.find(val => val !== currentVal);
        const otherCheck = Array.from(vehicleChecks).find(c => c.value === otherVal);
        if (otherCheck && otherCheck.checked) {
          this.checked = false;
          alert("Bike和Boat不能同时选中！");
        }
      }
    })
  })
})

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