Question

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

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

我有很多类（数组）＆amp;这些课程中的一些科目，＆amp;每个主题对应一个复选框，如果选择了一个或多个复选框，无论它们属于相同或不同的类，都应该启用该按钮。这是代码，现在只考虑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()。我没有看到＆＃34; state＆＃34;你的class1 / class6数组中的param。

链接：

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

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

1 个答案: