作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
title = "Angular 2 - enable button based on checkboxes";
checkboxes = [{label: 'one',selected:false},
{label: 'two',selected:false}
];
selectedFileList:any[]=[];
checkClicked(event: Event, i) {
if (event.target['checked']) {
this.selectedFileList.push(i);
console.log("selected checkBox is: "+this.selectedFileList);
}
else {
let index = this.selectedFileList.indexOf(i);
if (index !== -1) this.selectedFileList.splice(index, 1);
console.log("inside else")
this.selectedFileList=[];
}
}
constructor() { console.clear(); }
buttonState() {
// console.log('buttonState() called');
return !this.checkboxes.some(cb => cb.selected) && (this.selectedFileList.length=1);
}
get debug() {
return JSON.stringify(this.checkboxes);
}
}
我正在检查 selectedFileList 的长度以检查是否选择了超过 1 个 cb 但无法这样做请帮忙。
仅当选择 1 个 cb 时才应启用按钮,如果选择 0 个或超过 1 个则应禁用按钮
堆栈 Blitz : https://stackblitz.com/edit/angular-cjccyp?file=src%2Fapp%2Fapp.component.ts
最佳答案
改变
!this.checkboxes.some(cb => cb.selected)
到
this.checkboxes.filter(cb => cb.selected).length === 1
您还可以在 this.selectedFileList.length=1
1
关于javascript - 如果仅选中 1 个复选框,则启用按钮。否则禁用按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55121446/
我是一名优秀的程序员,十分优秀!