Angular 在选择2个复选框时禁用动态生成的复选框-角度

我使用FormArray&Responsive Forms模块动态生成复选框

这里我需要的是，如果用户选择任意两个复选框，我想禁用rest复选框。如果他取消选择任何1，则再次允许他从其他人中选择。 完成2个选择后，所有其余部分将禁用

下面是HTML部分

    <form [formGroup]="userForm" (ngSubmit)="onFormSubmit()">
    <label>
      <b>Time Out Period :</b>
    </label>
    <div class="input-group">
      <input type="text" class="form-control" maxlength="2" formControlName="tbl_config_TimeoutPeriod">
    </div>
    <div *ngIf="tbl_config_TimeoutPeriod.invalid && tbl_config_TimeoutPeriod.touched">
      <span style="color:red;margin-top:3px">Time Out Period field is mandatory..!</span>
    </div>
    <br>
    <div formArrayName="users">
      <div *ngFor="let user of users.controls; index as idx">
        <input [formControlName]="idx" type="checkbox"   >
        <button (click)="deleteUserField(idx)">Delete</button>
      </div>
    </div>
    <br>
    <button type="submit" [disabled]="!userForm.valid" class="btn btn-primary">Save Changes</button>
    <button type="button" (click)="addUserField()">Add More User</button>
  </form>

---

您可以这样更改输入：

    <input type="checkbox" 
        [disabled]="amountChecked==2&&!input.checked
            ?'disabled'
            :''" 
        (change)="handleCheck($event.target)" 
        #input>

另外，更改deleteUserField方法：

复选框值的任何更改都会更改amountChecked。它保存选中多少复选框的值。 [disabled]绑定到您在此处设置为2的自定义金额，如果达到此值，则所有未选中的复选框都将被禁用。 输入是一个模板引用变量，作用域为每个ngFor循环，因此始终引用输入本身。这是为了避免禁用复选框。 编辑

---

根据要求，我更新了到示例的链接，mergin使用我的解决方案从问题中删除了所有代码。此外，为了能够正确地删除输入和处理状态，我在上面和示例中做了一些更改。

我在一个新项目中复制了您的代码，添加了一些内容。对不起，链接错误。无论如何，仍然存在一个问题，工作示例也是如此。之前，它没有处理复选框的删除。我会更新我的回答嘿，对不起，错过了你的评论。我想我错过了[formControlName]=idx部分。我对反应式表单不太熟悉，但把它放进去似乎就行了——对不起，我在工作，所以我通常不能回复。不管怎样，你看。这将重新启用max checked逻辑。基本上你不能使用[disabled]绑定，但必须使用control.disable或control.enable如果一切如你所愿，我会在几小时内更新答案否：我的意思是在我最后的评论中检查链接中的解决方案，如果它满足了我更新的所有需要。我想去应该很好，但只是确保你检查一下

    <input type="checkbox" 
        [disabled]="amountChecked==2&&!input.checked
            ?'disabled'
            :''" 
        (change)="handleCheck($event.target)" 
        #input>

amountChecked=0
handleCheck(ev){
  if(ev.target.checked==true){
    this.amountChecked++
  }else{
    this.amountChecked--
  }
}

deleteUserField(index: number,el:HTMLInputElement) {
  el.checked=false
  this.handleCheck(el)
  this.users.removeAt(index);
}