Angular2, disable button if no checkbox selected

Question

I have multiple checkboxes and a button that has to be enabled only if at least one checkbox is selected

<input type="checkbox">VALUE1
<input type="checkbox">VALUE2
<input type="checkbox">VALUE3
<input type="checkbox">VALUE4
<button>Proceed</button>

How is this achieved using Angular2.

P.S: found similar questions but not using Angular2.

Mystify

try this: *ng-if="<condition>" – Anemophilous

Answer 1

One way is to use ngModel on each checkbox, then control the button's disabled property via a method that examines each checkbox model state:

@Component({
  template: `
    <label *ngFor="let cb of checkboxes">
      <input type="checkbox" [(ngModel)]="cb.state">{{cb.label}}
    </label>
    <p><button [disabled]="buttonState()">button</button>
  `
})
class App {
  checkboxes = [{label: 'one'},{label: 'two'}];
  constructor() {}
  buttonState() {
    return !this.checkboxes.some(_ => _.state);
  }
}

Plunker

Glazier

Appreciate the answer given. Any idea why the buttonState function is triggered multiple times? and how to avoid triggering multiple times? – Cullender

Expression interpolation is done each time Angular sees fit (something has happened in the component and Angular started its change detection algorithm to update 2way bound variables) – Unbrace

How would you do this only if ALL checkboes is selecred? – Balaklava

@Harry, return !this.checkboxes.every(_ => _.state); – Glazier

@MarkRajcok Getting error for using this line return !this.checkboxes.some(_ => _.state); – Centillion

my problem to this solution is that you are creating the checkboxes dynamically using ngFor and by declaring the checkboxes variable in typeScript. But in the problem checkboxes are created in a static way using normal html – Delamare

Answer 2

Use the propertie [disable] as:

<input type="checkbox" [(ng-model)]="disableButton1"> VALUE1
<input type="checkbox" [(ng-model)]="disableButton2"> VALUE1
<input type="checkbox" [(ng-model)]="disableButton3"> VALUE1
<input type="checkbox" [(ng-model)]="disableButton4"> VALUE1
<button type="button" [disabled]="disableButton || disableButton2">Submit</button>

Anemophilous

Thank you, but although that it works, with multiple checkboxes, it ends up selecting all if one is selected – Mystify

Update my example. Look now – Anemophilous

This works perfectly in the case of a static code, but when checkboxes are being created dynamically, say using *ng-for perhaps only option is using a Boolean variable assigned based on the count of selected checkboxes. – Mystify

Answer 3

You can perform any action by using $event in change event of checkbox.

Sample:

HTML

<input type="checkbox" (change)="changeEvent($event)" />
<button [disabled]="toogleBool">button</button>

TS

 toggleBool: boolean=true;

 changeEvent(event) {
        if (event.target.checked) {
            this.toggleBool= false;
        }
        else {
            this.toggleBool= true;
        }
    }

Delamare

Answer 4

I faced same issue in my project and i solved it.

sample:

HTML

<table class="table">
<thead>
    <tr>
        <th>Select</th>
        <th>Name</th>
    </tr>
</thead>
<tbody>
    <tr *ngFor="let item of items">
        <td><input type="checkbox" [(ngModel)]="item.chosen"></td>
        <td>{{item.name}}</td>
    </tr>
</tbody>
</table>
<button [disabled]="noneSelcted()">OK</button>

TS

import {Componnet} from '@angular/core'

@Componnet({
    selector: 'my-test',
    templateUrl: 'app/home/test.component.html'
})

export class TestComponent{
    items = [
        { name: 'user1', chosen: false},
        { name: 'user2', chosen: false},
        { name: 'user3', chosen: false},
    ];

    noneSelected(){
        return !this.items.some(item => item.chosen);
    }
}

Ganesha