javascript - 根据表单值角度禁用表格中的复选框

Question

我有一个名为Value的表单字段。

我有一个复制表单的添加按钮。

我有一个显示表格的按钮和一个隐藏表格的后退按钮。（忘记删除按钮）

该表有一列充满了复选框。现在在表格中，我将单击与我在值表单中输入的值一样多的复选框。

例如，如果我在该表单中输入了 2，我最多可以单击该表中的 2 个复选框。

之后，我通过单击后退按钮返回表单。

我的问题：

现在我的问题是当我再次单击添加按钮时，如果我复制另一个值表单并输入另一个值 3，如果我去检查表格，你会看到复选框未选中。相反，我想要的是我之前检查过的复选框应该被禁用。

我已经尽可能清楚地解释了我的问题。如果您对我的问题有疑问，请发表评论。谢谢。

注意：在我的 stackblitz 中，我以简单（没有丰富的 UI）的方式发布了我的代码示例

Stackblitz：https ://stackblitz.com/edit/angular-ivy-g8cty1?file=src%2Fapp%2Fapp.component.ts

标签： javascriptangulartypescriptangular5angular7

Answer 1

据我了解，即使在表格关闭并重新打开后，您也希望保持选中复选框，

您可以使用事件绑定来做到这一点：

<td>
    input  type="checkbox" id="vehicle2" name="vehicle2" 
      (change)="addCheckValue(i,list.isTicked)"
      [checked]="list.isTicked"
      [disabled]="list.isDisabled">
  </td>


  <td *ngIf="list.isDisabled">
            Already disabled
    </td>



addCheckValue(index,isChecked){
    if(isChecked === undefined){
      isChecked = true
    }
    this.listes[index].isTicked = isChecked;

  }



//disabled checked boxes on close 
this.listes = this.listes.map(e => {
      if (e.isTicked === true) {
        e.isDisabled = true;
      }
      return e;
});

你编辑的回购