Svelte多复选框组表单用disabled按组限制选中数异常排查

• 全局状态无隔离：原代码用单个全局布尔变量disableit控制所有复选框的禁用状态，只要任意一组触发禁用条件，所有组的复选框都会被同步禁用，完全没有分组维度的状态隔离。
• 选中数据混合存储：所有组的选中项都绑定到同一个全局checkresults数组，没有按组做分区存储，统计选中数量时无法精准区分选中项所属分组，之前尝试加组ID判断的方案因为缺少分组维度的独立计数，根本无法生效。
• 选中值引用异常：原代码给复选框绑定的value是每次渲染时临时创建的新对象，Svelte的bind:group对于非原始值类型默认靠引用相等判断选中状态，临时创建的对象会导致选中匹配异常，计数不准。
• 事件监听有遗漏：原代码靠on:click事件触发选中计数逻辑，无法覆盖键盘操作选中等场景，统计结果容易出现偏差。

核心思路是按组独立存储选中状态，每个组单独计算已选数量，禁用逻辑仅对当前组生效，同时优化交互逻辑：选满限额后仅禁用同组未选的复选框，已选中的选项保持可点击状态，支持用户取消选择调整。

完整实现代码 #

<script>
  // 后端返回的动态选项组数据，无需修改原有数据结构
  let optiongroups = [
    {
      groupname : "exactly1",
      grouplimit : 1,
      id : 123,
      optionitems : [
        {name : "One", price : 1},
        {name : "Two", price : 2},
        {name : "Three", price : 3},
        {name : "Four", price : 4}
      ]
    },
    {
      groupname : "exactly2",
      grouplimit : 2,
      id : 369,
      optionitems : [
        {name : "2-One", price : 22},
        {name : "2-Two", price : 44},
        {name : "2-Three", price : 66},
        {name : "2-Four", price : 88}
      ]
    }
  ]

  // 按组ID存储各分组选中项，key为组ID，value为对应组的选中选项数组
  let selectedMap = {}
  // 自动初始化新增分组的选中数组，适配动态返回的分组数据
  $: optiongroups.forEach(group => {
    if (!selectedMap[group.id]) selectedMap[group.id] = []
  })

  // 提交逻辑，可直接从selectedMap中获取所有分组的选中结果
  function collectoptions() {
    console.log('所有分组选中结果：', selectedMap)
    // 后续加购物车提交逻辑自行实现即可
  }

  // 单个选项禁用判断逻辑
  function isOptionDisabled(group, option) {
    const currentSelected = selectedMap[group.id]
    // 未达到选额上限，所有选项均可点击
    if (currentSelected.length < group.grouplimit) return false
    // 达到上限后，仅未选中的选项禁用，已选中的选项允许点击取消
    return !currentSelected.some(item => item.name === option.name && item.price === option.price)
  }
</script>

<form name="optionsform" on:submit|preventDefault={collectoptions}>
  {#each optiongroups as group (group.id)}
  <div style="margin : 5px; border : solid green;">
    <div style="list-style : none;">
      {group.groupname} - 限选{group.grouplimit}个，已选{selectedMap[group.id].length}个
      <ul>
        {#each group.optionitems as option (option.name + option.price)}
        <li>
          <label>
            <input 
              name={group.groupname}  
              type="checkbox" 
              bind:group={selectedMap[group.id]} 
              value={option}
              disabled={isOptionDisabled(group, option)}
            >
             {option.name} : {option.price}
          </label>
        </li>
        {/each}
      </ul>
    </div>
  </div>
  {/each}
  <button type="submit">Add To cart</button>
</form>

方案优势 #

• 完全无跨组干扰：每个分组的选中状态、计数逻辑完全独立，不管有多少个分组，都不会出现A组选满导致B组被禁用的问题
• 计数稳定准确：直接读取对应分组的选中数组长度做判断，不需要手动监听事件统计，覆盖鼠标点击、键盘选中所有操作场景，不会出现计数偏差导致提前禁用
• 交互逻辑合理：选满后仅锁定未选项，已选项支持取消重选，不会出现选满就无法修改的问题
• 适配动态数据：不管后端返回多少个分组、每个分组有多少选项、限额是多少，都不需要调整代码，自动适配
• 代码更简洁：去掉了冗余的click事件监听，完全依靠Svelte原生双向绑定实现状态同步，维护成本更低

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