产品与国家两组复选框条件交互逻辑异常，求修复方案

需求说明 #

• 场景1：允许选择1个国家 + 多个产品
• 场景2：允许选择多个国家 + 1个产品
• 核心规则：
  • 若选中2个及以上产品，仅能选择1个国家
  • 若选中多个国家，仅能选择1个产品

当前问题 #

选中1个产品后再勾选第二个，第一个产品会被取消选中且所有产品复选框被禁用；国家复选框可被全部选中，完全不符合需求逻辑。

现有错误代码 #

$(document).ready(function() {
  var maxCountrySelection = 1;
  var maxIndicatorSelection = 1;

  var countryCheckboxes = $('input[type="checkbox"].countryCheckbox');
  var indicatorCheckboxes = $('input[type="checkbox"].indicatorCheckbox');

  countryCheckboxes.change(function() {
    var selectedCountries = countryCheckboxes.filter(':checked');
    var selectedIndicators = indicatorCheckboxes.filter(':checked');

    if (selectedCountries.length > maxCountrySelection) {
      countryCheckboxes.not(this).prop('checked', false).prop('disabled', true);
    } else {
      countryCheckboxes.prop('disabled', false);
    }

    if (selectedIndicators.length > 0) {
      indicatorCheckboxes.not(':checked').prop('disabled', true);
    } else {
      indicatorCheckboxes.prop('disabled', false);
    }
  });

  indicatorCheckboxes.change(function() {
    var selectedCountries = countryCheckboxes.filter(':checked');
    var selectedIndicators = indicatorCheckboxes.filter(':checked');

    if (selectedIndicators.length > maxIndicatorSelection) {
      indicatorCheckboxes.not(this).prop('checked', false).prop('disabled', true);
    } else {
      indicatorCheckboxes.prop('disabled', false);
    }

    if (selectedCountries.length > 0) {
      countryCheckboxes.not(':checked').prop('disabled', true);
    } else {
      countryCheckboxes.prop('disabled', false);
    }
  });
});

修正后的代码 #

$(document).ready(function() {
  var countryCheckboxes = $('input[type="checkbox"].countryCheckbox');
  var indicatorCheckboxes = $('input[type="checkbox"].indicatorCheckbox');

  // 统一处理复选框状态的函数
  function updateCheckboxStates() {
    var selectedCountries = countryCheckboxes.filter(':checked').length;
    var selectedProducts = indicatorCheckboxes.filter(':checked').length;

    // 规则1：如果产品选了2个及以上，国家只能选1个
    if (selectedProducts >= 2) {
      // 如果当前国家选中数超过1，取消多余的选中项
      if (selectedCountries > 1) {
        countryCheckboxes.filter(':checked').slice(1).prop('checked', false);
      }
      // 禁用未选中的国家复选框
      countryCheckboxes.not(':checked').prop('disabled', true);
    } 
    // 规则2：如果国家选了2个及以上，产品只能选1个
    else if (selectedCountries >= 2) {
      // 如果当前产品选中数超过1，取消多余的选中项
      if (selectedProducts > 1) {
        indicatorCheckboxes.filter(':checked').slice(1).prop('checked', false);
      }
      // 禁用未选中的产品复选框
      indicatorCheckboxes.not(':checked').prop('disabled', true);
    } 
    // 无特殊限制，启用所有复选框
    else {
      countryCheckboxes.prop('disabled', false);
      indicatorCheckboxes.prop('disabled', false);
    }
  }

  // 绑定两个复选框组的change事件
  countryCheckboxes.change(updateCheckboxStates);
  indicatorCheckboxes.change(updateCheckboxStates);
});

逻辑说明 #

1. 移除固定的最大选择数限制，改为根据对方选中数量动态判断规则
2. 统一用一个函数处理状态更新，避免重复逻辑
3. 触发规则时：
   • 先检查当前选中数是否违反限制，若违反则取消多余选中项（保留第一个选中的）
   • 再禁用未选中的复选框，防止继续选择违反规则
4. 无规则触发时，恢复所有复选框的可用状态

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