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

Popular posts from this blog

sequelize.js - Sequelize group by with association includes id -

android - Robolectric "INTERNET permission is required" -

java - Android raising EPERM (Operation not permitted) when attempting to send UDP packet after network connection -