如果选中了 1 个或多个复选框，如何启用提交按钮？

Question

我在这里查看了 Mark 的解决方案：Angular2, disable button if no checkbox selected 但是我有多个数组，如何修改链接中的代码？

或者有任何其他解决方案的人吗？我想在 angularJs 2 中做到这一点。

我有许多类（数组）和这些类中的许多主题，每个主题对应一个复选框，如果选择了一个或多个复选框，无论它们属于同一类还是不同类，按钮应该是启用。 这是代码，现在它只考虑class1：

 import {bootstrap} from 'angular2/platform/browser';

    import {Component} from '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);

      }

    }

Answer 1

我没有运行此代码，但其想法是将您的复选框状态统一到一个参数。在下面的代码中，我创建了属性 buttonState 来存储按钮状态。我还使用(ngModelChange) 作为事件侦听器来调用方法setButtonState()。我没有在您的class1/class6 数组中看到“状态”参数。

链接：

ngModelChange : https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngModel

使用示例：Angular 2 ngModelChange select option, grab a 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;
      }
  }
}