使用多个选项的残疾属性限制Svelte表单中的复选框数量

Question

显示项目选项的表格。用户假设为每个项目选择特定数量的选项。选项示例：

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
          }
        ]

       }

]

使用一组选项，此代码可行：

<form name="optionsform" on:submit|preventDefault={()=>collectoptions(itemid, itemprice, itemname,  itemdescription, variationname, variationprice)}>

  {#each optiongroups as group}
  <div style="margin : 5px; border : solid green;">
  <li style="list-style : none;">
    {group.groupname} - {group.grouplimit}
    {#each group.optionitems as option}

    <li>
      <label>
        <input name={group.groupname}  type="checkbox" bind:group={checkresults} value={[{"name" : option.name},{ "price" : option.price } ]} on:click={(e)=>{handleclick(e, group.groupname, group.grouplimit, group.id)}} disabled={disableit === true}>
         {option.name} : {option.price}
   </label>
      
    </li>
    {/each}

  </li>
  </div>
  {/each}
<button type="submit" >Add To cart</button>
</form>

通过在我的脚本中使用禁用来禁用输入复选框，并且确实可以正常工作，但是当我添加更多的选项时，它来自DB，我不得知道每个项目都有多少个选项组 - 因此，当我添加多个选项时：

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
          }
        ]

       }]

如果您在repl中运行此代码时，您会观察到，当您单击第一组中的选项时 - 正好1-并超过限制您需要选择的选项，该组中的其余复选框将被禁用 - 这是所需的结果 - 但是当您在第二组中启动选择时 - 恰好2--您将选择一个复选框，然后所有其余的所有内容也禁用。我试图以不同的方式尝试移动限制变量，但也没有阻止第二组被禁用。

禁用的行，我尝试添加不同的条件：

disabled={disableit === true && checkresults['id'].includes(group['id'])}

但是，它仍然禁用第二组中的其余复选框。因此，允许用户从两个组中总共检查3个复选框，而不是第一组中的1个选项，第二组中的2个选项。

想知道是否有人可以弄清楚该错误在哪里或将我引向如何包含一组选项，并让用户从每个组中选择正确的选项，然后限制其余的复选框。

Answer 1

您不能使用所有组的简单全局值，例如disableIt；相反，您需要按小组检查状态。例如，如果checkResults根据此类可用组将其初始化为字典：

let checkresults = Object.fromEntries(optiongroups.map(g => [g.groupname, []]));

那么您可以通过以下方式通过：

<input name={group.groupname}  type="checkbox"
       bind:group={checkresults[group.groupname]}
       value={[{ "name" : option.name }, { "price" : option.price }]}
       disabled={
           checkresults[group.groupname].length === group.grouplimit &&
           checkresults[group.groupname].some(x => x[0].name == option.name) == false
       }>

replot示例

value设置的方式使它有点冗长。同样，将每个组的整个内容隔离到一个单独的组件中会更容易，这样他们就可以在本地管理自己的状态，并且您不需要使用复杂的状态访问，例如checkResults [group.groupname] 始终。