如果选中一个或多个复选框，如何启用提交按钮？ [英] How do I enable a submit button if 1 or more checkboxes are checked?

问题描述

我在这里查看了Mark的解决方案： Angular2，禁用按钮如果没有选中复选框
但我有多个数组，如何修改链接中的代码？

I went through Mark's solution here : Angular2, disable button if no checkbox selected but I have more than 1 array, how do I modify the code in the link?

或是否有其他任何解决方案可以做到这一点？我想在angularJs 2中这样做。

Or anyone with any other solution for doing this? I want to do this in angularJs 2.

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

I have a number of classes(arrays) & a number of subjects in those classes, & each subject corresponds to a checkbox, if one or more checkboxes are selected no matter they belong to same or different class, the button should be enabled. Here's the code, right now it considers only 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);

      }

    }

推荐答案

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

I did not run this code, but the idea is to unite your checkboxes states to one param. In the following code I made property buttonState to store button state. I also use (ngModelChange) as event listener to call method setButtonState().I did not see "state" param in your class1/class6 arrays.

链接：

ngModelChange： https://angular.io/docs/ts/latest/guide/template-syntax.html ＃！＃ngModel

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

使用示例： Angular 2 ngModelChange选择选项，获取特定属性

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

这篇关于如果选中一个或多个复选框，如何启用提交按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！