我有一个带复选框的项目表,想在用户选中15个项目时将其禁用。
我的代码是:
<mdc-checkbox class="checkbox-primary" [(ngModel)]="item.isChecked"
(change)="$event ? selection.toggle(row) : null" (click)="$event.stopPropagation()"
(change)="onChecked(item)" [disabled]="itemList.length > 15">
</mdc-checkbox>
这是可行的,但是它禁用了所有这些,因此您不能取消选中已选中的一项并选中另一项。
问题是-当用户选中第15个未选中的复选框时,如何仅禁用它们?
答案 0 :(得分:0)
使用少量js,我们可以防止选中3个以上的复选框。那是您要找的东西吗?
document.addEventListener("click", myClick);
function myClick(){
var cbs = document.getElementsByClassName('cb');
var index=-1;
var sum =0;
for(let i = 0;i<cbs.length;i++){
if(cbs[i].checked==true)sum++;
if(event.target==cbs[i])index=i;
}
if(sum > 3)cbs[index].checked=false;
}
<input type='checkbox' id='a' name ='1' class='cb'/>
<input type='checkbox' name ='2' class='cb'/>
<input type='checkbox' name ='3' class='cb'/>
<input type='checkbox' name ='4' class='cb'/>