Angular2，如果没有选中复选框，则禁用按钮 [英] Angular2, disable button if no checkbox selected

问题描述

我有多个复选框和一个必须至少选择一个复选框才能启用的按钮。

I have multiple checkboxes and a button that has to be enabled only if at least one checkbox is selected

<input type="checkbox">VALUE1
<input type="checkbox">VALUE2
<input type="checkbox">VALUE3
<input type="checkbox">VALUE4
<button>Proceed</button>

如何使用Angular2实现这一点。

How is this achieved using Angular2.

推荐答案

一种方法是使用 ngModel ，然后通过检查每个复选框模型状态的方法控制按钮的 disabled 属性：

One way is to use ngModel on each checkbox, then control the button's disabled property via a method that examines each checkbox model state:

@Component({
  template: `
    <label *ngFor="let cb of checkboxes">
      <input type="checkbox" [(ngModel)]="cb.state">{{cb.label}}
    </label>
    <p><button [disabled]="buttonState()">button</button>
  `
})
class App {
  checkboxes = [{label: 'one'},{label: 'two'}];
  constructor() {}
  buttonState() {
    return !this.checkboxes.some(_ => _.state);
  }
}

朋友

这篇关于Angular2，如果没有选中复选框，则禁用按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！