html5 - How do I enable a submit button if 1 or more checkboxes are checked? -
i went through mark's solution here : angular2, disable button if no checkbox selected have more 1 array, how modify code in link?
or other solution doing this? want in angularjs 2.
i have number of classes(arrays) & number of subjects in classes, & each subject corresponds checkbox, if 1 or more checkboxes selected no matter belong same or different class, button should enabled. here's code, right considers class1:
import {bootstrap} 'angular2/platform/browser'; import {component} 'angular2/core' @component({ selector: 'my-app', template: ` <label *ngfor="let cb of class1"> <input type="checkbox" [(ngmodel)]="cb.state">{{cb.label}}<br/> </label><br/> <label *ngfor="let cb of class6"> <input type="checkbox" [(ngmodel)]="cb.state">{{cb.label}}<br/> </label> <p><button [disabled]="buttonstate()">button</button></p> ` }) class app { class1 = [{label: 'english(class1-5)'},{label: 'maths(class1-5)'}]; class6 = [{label: 'english(class6-8)'},{label: 'maths(class6-8)'}]; buttonstate() { console.log('buttonstate() called'); return !this.class1.some(_ => _.state); } }
i did not run code, idea unite checkboxes states 1 param. in following code made property buttonstate store button state. use (ngmodelchange)
event listener call method setbuttonstate()
.i did not see "state" param in class1/class6 arrays.
links:
ngmodelchange : https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngmodel
example of using: angular 2 ngmodelchange select option, grab specific property
@component({ selector: 'my-app', template: ` <label *ngfor="let cb of classes"> <input type="checkbox" [(ngmodel)]="cb.state" (ngmodelchange)="setbuttonstate()"/>{{cb.label}} </label> <p><button [disabled]="buttonstate">button</button></p>` }) export class appcomponent { private buttonstate: boolean = true; private classes = [{label: 'english(class1-5)', state: false},{label: 'maths(class1-5)', state: false}, {label: 'english(class6-8)', state: false},{label: 'maths(class6-8)', state: false} ]; setbuttonstate() { let counter = 0; for(let i=0;i<this.classes.length;i++) { if (this.classes[i].state === true) { counter++; } } if (counter >= 2) { this.buttonstate = false; } else { this.buttonstate = true; } } }
Comments
Post a Comment