本文讲解如何使用 jquery 根据特定复选框（如“egg roll”）的选中状态，动态调整另一组复选框（如酱料）的最大可选数量：默认限 1 项，当触发条件满足时放宽至 2 项。
本文讲解如何使用 jquery 根据特定复选框（如“egg roll”）的选中状态，动态调整另一组复选框（如酱料）的最大可选数量：默认限 1 项，当触发条件满足时放宽至 2 项。
在实际表单开发中，常需实现「条件化互斥选择」——例如酱料区域通常为单选（仅允许勾选 1 项），但当用户选择了某特定配菜（如“Egg Roll”）时，业务逻辑要求可最多选择 2 种酱料。这种动态校验不能依赖静态 max 属性（HTML 不支持），而需通过 JavaScript 实时监听与干预。
核心思路是：在每个酱料复选框的 change 事件中，立即统计当前已选中的酱料数量，并结合“Egg Roll”（#side2）的选中状态，判断是否超出允许上限；若超限，则主动取消当前操作项的选中状态。
以下是完整、健壮且无副作用的实现方案：
$('input:checkbox[class="sauce"]').change(function() {
const checkedCount = $('[name="sauce"]:checked').length;
const eggRollSelected = $('#side2').prop('checked');
// 规则：
// - 若 Egg Roll 未选中 → 最多允许 1 项（即 checkedCount >= 2 时违规）
// - 若 Egg Roll 已选中 → 最多允许 2 项（即 checkedCount > 2 时违规）
if ((checkedCount >= 2 && !eggRollSelected) || (eggRollSelected && checkedCount > 2)) {
$(this).prop('checked', false);
}
});✅ 关键优势说明：
- 无需全局变量：避免了原代码中 last 和 num 变量引发的状态同步问题（如异步变更、作用域污染）；
- 精准作用域限定：使用 $('[name="sauce"]:checked') 确保只统计酱料组，不受“Sides”复选框干扰；
- 即时响应：在用户点击瞬间完成校验并回滚，体验流畅无延迟；
- 语义清晰：条件表达式直译业务规则，便于后续维护与扩展（如未来支持 3 项，只需修改数值和逻辑分支）。
⚠️ 注意事项：
- 确保 jQuery 已正确加载（推荐使用 CDN 或模块化引入）；
- 所有酱料复选框必须具有相同 name="sauce" 属性，这是精准筛选的基础；
- 不建议对 .change() 绑定多次（易导致重复执行），应统一入口或使用事件委托（如 $(document).on('change', 'input.sauce', handler)）提升可维护性；
- 如需兼容旧版 IE，请将 .prop('checked') 替换为 .is(':checked')（功能等价）。
该方案简洁、可靠、可扩展，适用于各类「条件驱动的多选约束」场景，是前端表单交互控制的经典实践。
