Multiple Checkbox with Toggle Value

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}

this is trivial if you were to use reactive forms, you would add (change) events to trigger changes. do you want example or are you definately using template forms no matter what? — Andrew Allen
– Andrew Allen, Commented May 2, 2019 at 7:20

Michal S · Accepted Answer · 2019-05-04 18:32:49Z

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.

edited May 4, 2019 at 18:32

answered May 2, 2019 at 8:20

Michal S

3182 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Aravindhan R Over a year ago

Thanks Michal. I have done with the same logic using jquery by picking the value fro m hidden textbox.

Michal S Over a year ago

@AravindhanR Happy to hear that it helped you!

Collectives™ on Stack Overflow

Multiple Checkbox with Toggle Value

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related