基于jQuery实现同组复选框最大可选数限制的代码失效排查

• 最核心的失效原因：原交互逻辑存在自相矛盾的操作：当选中数达到设定值时，代码先给所有同组复选框添加禁用属性，紧接着立刻执行移除禁用属性的操作，等于加了禁用马上就取消，完全起不到限制选择的效果。对应原代码片段：

  if ($("input[name=addon-3913-carnes]:checked").length == max) {
    $("input[name=addon-3913-carnes]").attr('disabled', 'disabled');
    // 刚添加完禁用立刻执行移除，等于操作完全无效
    $("input[name=addon-3913-carnes]").removeAttr('disabled');
  }
  

• 禁用对象范围错误：原逻辑如果不做后面的移除操作，会把已经选中的复选框也一并禁用，导致用户选中后无法取消调整选项，交互逻辑完全不符合使用预期。
• 属性操作方法不适配当前jQuery版本：jQuery 3.x版本中，表单元素的状态类属性（disabled、checked等）需要通过.prop()方法操作，继续用.attr()会出现状态同步异常的问题。
• 规则数值不匹配：

  页面现有提示文案：Escolha no máximo 3（最多选择3项）
  但代码里配置的最大可选值是2，两边规则不对齐，容易造成用户体验偏差。

$(function() {
  // 配置最大可选数量，可根据页面提示直接修改数值
  const maxAllowed = 2;
  $("input[name=addon-3913-carnes]").change(function() {
    // 统计当前同组已选中的选项数量
    const checkedCount = $("input[name=addon-3913-carnes]:checked").length;
    // 选中数达到上限时，仅禁用未选中的选项
    if (checkedCount >= maxAllowed) {
      $("input[name=addon-3913-carnes]").not(":checked").prop("disabled", true);
    } else {
      // 未达上限时，恢复所有选项的可交互状态
      $("input[name=addon-3913-carnes]").prop("disabled", false);
    }
  });
});

• 移除了原逻辑中“添加禁用后立刻移除”的无效冲突操作
• 调整禁用范围：仅禁用未选中的复选框，保留已选中项的可点击状态，支持用户取消已选内容调整选项
• 用.prop()替换.attr()处理禁用状态，适配jQuery 3.x的属性处理规则，避免状态不同步的异常问题
• 判断条件从“等于最大值”调整为“大于等于最大值”，堵住边缘场景下的多选漏洞
• 将最大可选数提取为独立常量，后续调整规则时只需修改一处数值，不需要改动核心交互逻辑

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