根據表單值禁用表格中的復選框 angular

Question

我有一個名為Value的表單字段。

我有一個復制表單的添加按鈕。

我有一個顯示表格的按鈕和一個隱藏表格的后退按鈕。（忘記刪除按鈕）

該表有一列充滿了復選框。 現在在表格中，我將單擊與我在值表單中輸入的值一樣多的復選框。

例如，如果我在該表單中輸入了 2，我最多可以單擊該表中的 2 個復選框。

之后，我通過單擊后退按鈕返回表單。

我的問題：

現在我的問題是當我再次單擊添加按鈕時，如果我復制另一個值表單並輸入另一個值 3，並且如果我 go 檢查表格，您會看到復選框未選中。 相反，我想要的是我之前檢查過的復選框應該被禁用。

我已經盡可能清楚地解釋了我的問題。 如果您對我的問題有疑問，請發表評論。 謝謝。

注意：在我的 stackblitz 中，我以簡單（沒有豐富的 UI）的方式發布了我的代碼示例

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

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;
});

你編輯的回購