Disable other check boxes with [disabled] in Angular 2

Question

I want the other check boxes to be disabled when one is selected. I am doing so by

<span class="input-group-addon">
    <input type="checkbox" name="ssn" (change)="checkBox[0].checked=!checkBox[0].checked">
</span>

<span class="input-group-addon">
   <label>{{checkBox[0].label}}</label>
</span>

<input [(ngModel)]="ssn" type="password" name="ssnText" class="form-control" placeholder=" ">

I have 6 checkboxes all of which look like above. However I want them to only be able to select 1 checkbox NOT multiple like it is doing right now.

In my component:

ssn:string;
    userId:string;
    lastName:string;
    office:string;
    role:string;

checkIfOthersAreSelected:boolean

checkBox = [
    {label: 'SSN', name:'ssn', checked:false},
    {label: 'Last Name', name:'lastName', checked:false},
    {label: 'Role', name:'role', checked:false},
    {label: 'UserId', name:'userId', checked:false},
    {label: 'Office', name:'office', checked:false},
    {label: ' Include Subordinates', name:'subordinates', checked:false}
];

button in html

<button type="submit" (click)="search(checkBox)" class="btn btn-default btn-md left-button">Search</button>

searchMethod

 public search(checkboxArray) {

        let ssn = checkboxArray[0];
        let lastName=checkboxArray[1];
        let role=checkboxArray[2];
        let userId= checkboxArray[3];
        let office=checkboxArray[4];


        if(ssn.checked == true){
            console.log("What is checked: "+ssn.name+" input: "+this.ssn);
            this.user = this._searchService.getUserBySSN(this.ssn);
        }
        if(userId.checked == true){
            console.log("What is checked: "+userId.name+" input: "+this.userId);
            this.user = this._searchService.getUserById(this.userId);
        }

Answer 1

This should do it. Of course you could also do this with iteration if you like, but since you have all the checkbox separately I will do that here. Let's create a new method checkSelected that takes the label of the checkbox value which is triggered by (change) event. We set disable for checkboxes when the checked is set as true

<input type="checkbox" [disabled]="checkBox[0].checked" (change)="checkSelected(checkBox[0].label)">{{checkBox[0].label}}
<input type="checkbox" [disabled]="checkBox[1].checked" (change)="checkSelected(checkBox[1].label)">{{checkBox[1].label}}
<!-- The rest of the checkboxes -->

And in your TS let's iterate the array and check which label matches the one chosen. For the other checkboxes, we'll toggle the boolean value checked to true, while the chosen checkbox remains false.

checkSelected(label: string) {
   this.checkBox.forEach(x => {
       if(x.label !== label) {
           x.checked = !x.checked
       }
   })
}

When you uncheck the checkbox, it still remains false, and the other ones become false as well!

And there ya go, all done! :) Here's a Plunker.

Answer 2

Change it to

<input type="checkbox" [disabled]="checkIfOthersAreSelected" (change)="checkSelected($event)" />

In your event

checkSelected(e) {

   if(e.target.checked){
        this.checkIfOthersAreSelected = true;
   }
}

Answer 3

For me it'S a case for radio buttons instead of check boxes. And in this case I'm using this radio buttons from @angular/material. The setup of materials is a little bit challenging, but the components are worth it.