具有切换值的多个复选框

Question

我的要求是有一个具有某些特定条件的三个复选框，单击复选框。

例如，考虑三个复选框 1、2 和 3

如果我选择 1 复选框，则需要启用其他两个复选框（2、3）。

如果我更改为false (1)，则需要禁用其他两个复选框 (2, 3)。

另一个条件是，如果我取消选中复选框 (1)，那么其他两个复选框值应该需要重置 false (2, 3) 并需要禁用。

我已经完成了上述条件。 但是，问题是值没有在ngmodel更新。

下面的示例代码

 <td>
              <div class="col-lg-12" id="radiobutton">
                  <input #EDIsRead=ngModel [(ngModel)]="GetRoleIsRead.EDIsRead" name="GetRoleIsRead.EDIsRead" class="form-check-input col-sm-2"
                  type="checkbox" id="EDIsRead" style="padding-left: 0px !important;" (change)="CheckeventforRead('ED')">
              </div>
            </td>
            <td>
              <div class="col-lg-12" id="radiobutton">
                  <input #EDIsModifyLOB=ngModel [(ngModel)]="GetRoleIsModifyLOB.EDIsModifyLOB" name="GetRoleIsModifyLOB.EDIsModifyLOB" class="form-check-input col-sm-2"
                  type="checkbox" id="EDIsModifyLOB" style="padding-left: 0px !important;" (change)="CheckeventforModifyLOB('ED','0')">
              </div>
            </td>
            <td>
              <div class="col-lg-12" id="radiobutton">
                  <input #EDIsModifyAll=ngModel [(ngModel)]="GetRoleIsModifyAll.EDIsModifyAll" name="GetRoleIsModifyAll.EDIsModifyAll" class="form-check-input col-sm-2"
                  type="checkbox" id="EDIsModifyAll" style="padding-left: 0px !important;" (change)="CheckeventforModifyAll('ED','0')">
              </div>
            </td>`

输入传递true true false 。

所以，在这里我传递true 1， true为2，和false 3这是双向绑定。

如果我将 3 更改为true则 2 未选中但值未更改

这是我的示例 json。

前：

{"GetRoleIsRead.EDIsRead": true, "GetRoleIsModifyLOB.EDIsModifyLOB": false, "GetRoleIsModifyAll.EDIsModifyAll": true }

检查2ed后：

{"GetRoleIsRead.EDIsRead": true, "GetRoleIsModifyLOB.EDIsModifyLOB": true, "GetRoleIsModifyAll.EDIsModifyAll": true }

实际输出应该是：

{"GetRoleIsRead.EDIsRead": true, "GetRoleIsModifyLOB.EDIsModifyLOB": true, "GetRoleIsModifyAll.EDIsModifyAll": false}

Answer 1

我希望我理解你的意思，我用stackblitz做了一个例子，如果你需要这样说，我会解释更多。

简短说明 - 我使用[disabled]属性来启用/禁用输入，然后我使用(change)事件来清除变量的值。