17370845950

本文介绍一种基于 jquery 的动态表单控制方案，通过监听复选框状态变化，自动切换国家组（countries）与产品组（products）的输入类型（checkbox ↔ radio），从而强制满足“1国多品”或“多国1品”的业务约束条件。

在实际数据筛选场景中，常需对多维条件施加逻辑互斥约束：例如，当用户选择多个国家时，只允许选定单一产品；反之，若选择了多个产品，则仅能勾选一个国家。这种“非此即彼、动态降级”的交互模式无法靠静态 HTML 实现，需借助 JavaScript 动态干预 DOM 行为。

核心思路是：不手动禁用/反选控件，而是根据当前选中状态，实时将另一组控件的 type 属性在 checkbox 与 radio 之间切换。因为 radio 天然支持单选约束，且浏览器会自动处理同名 radio 的互斥行为，比手动管理 checked 和 disabled 更健壮、更符合语义。

以下是完整可运行的实现代码：

 Germany
 Italy
 France



 Orange
 Apple
 Banana

$(document).ready(function() {
  // 绑定所有国家和产品复选框的 change 事件
  $('[name^=country], [name^=product]').change(function() {
    const $countries = $('[name^=country]');
    const $products = $('[name^=product]');
    const checkedCountries = $countries.filter(':checked').length;
    const checkedProducts = $products.filter(':checked').length;

    // 若已选 >1 个国家 → 产品组转为 radio（强制单选）
    if (checkedCountries > 1) {
      $products.attr('type', 'radio').attr('name', 'product');
    } else {
      $products.attr('type', 'checkbox').attr('name', 'product[]');
    }

    // 若已选 >1 个产品 → 国家组转为 radio（强制单选）
    if (checkedProducts > 1) {
      $countries.attr('type', 'radio').attr('name', 'country');
    } else {
      $countries.attr('type', 'checkbox').attr('name', 'country[]');
    }
  });
});

✅ 关键优势说明：

• ✅ 无状态冲突：避免了原方案中 disabled 与 checked 手动同步导致的竞态问题（如反选后残留 disabled）；
• ✅ 符合可访问性（a11y）：radio 元素拥有明确的语义和屏幕阅读器支持；
• ✅ 零侵入式重置：无需监听 click 或阻止默认行为，完全依赖原生表单机制；
• ✅ 命名规范兼容：提交时仍可保持 country[] / product[] 数组格式（后端接收无感知）——注意：radio 模式下仅提交一个值，符合业务预期。

⚠️ 注意事项：

• 切换 type 属性会清空该组所有已选状态（浏览器标准行为）。因此建议在用户首次交互后才触发切换，或配合 setTimeout 延迟执行以保留当前选中项（进阶优化可封装为防抖 + 状态快照）；
• 若需保留「已选多个但尚未提交」的中间态（如 UI 高亮提示），应在切换前缓存选中值，并在 type 切换后手动恢复唯一有效项；
• 生产环境建议使用 data-name 自定义属性替代 name^= 选择器，提升选择器性能与健壮性。

该方案以极简逻辑达成强约束交互，兼顾可维护性与用户体验，是表单条件联动的经典轻量解法。