具有切换值的多个复选框

Question

My requirement is to have a three check box with some certain condition which clicking on the checkbox.

For example, consider three check box 1, 2, and 3

If I select on the 1 checkbox other two checkbox should need to be enable (2, 3).

If I change to false (1) then other two checkbox need to be disable (2, 3).

And another condition, if I unchecked the checkbox (1) then other two checkbox value should need to reset false (2, 3) and need to disable.

I have done with above condition. However, what is the problem is the value is not get updated in ngmodel .

Below sample code

 <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>`

Input passing true true false .

So, here I am passing true for 1, true for 2, and false for 3 which is two way binding.

If I change the 3 to true then 2 got unchecked but value is not changing

Here is my sample json.

Before:

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

After check the 2ed:

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

Actual output should need to be:

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

Answer 1

I hope I understood your meaning, I made an example with stackblitz if this is what you need just say that, and I will explain it more.

A short explanation - I used [disabled] property in order to enable/disable inputs, then I used (change) event to clear the values of the variables.