Angular2,如果没有选中复选框则禁用按钮 [英] Angular2, disable button if no checkbox selected
本文介绍了Angular2,如果没有选中复选框则禁用按钮的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有多个复选框和一个按钮,只有在选择了至少一个复选框时才必须启用该按钮
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.
P.S:发现了类似的问题,但没有使用 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屋!
查看全文