CODEWITHSUNDEEP
angular
Mike3355
Mike3355

Reputation: 12061

Disable other check boxes with [disabled] in Angular 2

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);
        }

Upvotes: 9

Views: 46619

Answers (6)

Sachin Khartode
Sachin Khartode

Reputation: 29

Enable disable textbox based on checkbox check event.

<input type="checkbox" 
[checked]="employee.PhysicalyChalanged" 
[(ngModel)]="employee.PhysicalyChalanged" 
id="PhysicalyChalanged" 
#PhysicalyChalanged
name="PhysicalyChalanged">

<input type="number" 
placeholder="Enter Physicaly Chalanged Percentage" 
class="form-control" 
id="PhysicalyChalangedPercentage" 
maxlength="3"
[disabled]="!PhysicalyChalanged.checked"
[(ngModel)]="employee.PhysicalyChalangedPercentage" 
name="PhysicalyChalangedPercentage" />

Upvotes: 1

Danny Bullis
Danny Bullis

Reputation: 3197

What about trying a <select> dropdown list with a 'none' option, which allows the user to effectively clear their selected search item?

<select (change)="onChange($event.target.value)">
    <option value='---'>None</option>
    <option *ngFor="let option of options" name='{{option.name}}'>{{option.label}}</option>
</select>

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

options = [
    {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}
];

onChange(optionValue) {
    if(optionValue === '---') {
       // clear your search query
    } else {
       // do your search
    }
}

Upvotes: 0

Danny Bullis
Danny Bullis

Reputation: 3197

Why don't you just use a radio button group instead? That functionality can be achieved without the use of any JavaScript (if I understand your needs correctly).

Take a look at radio buttons

Upvotes: 0

AVJT82
AVJT82

Reputation: 73377

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.

Upvotes: 8

Myonara
Myonara

Reputation: 1207

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.

Upvotes: 1

Ali Baig
Ali Baig

Reputation: 3867

Change it to

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

In your event

checkSelected(e) {

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

Upvotes: 2

Related Questions