材料设计 - 如果禁用复选框答案

【问题标题】：Material Design - disable checkbox if材料设计 - 如果禁用复选框
【发布时间】：2020-07-02 01:31:56
【问题描述】：

我有一个带有复选框的项目表，我想在用户检查 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 个复选框时，如何仅禁用未选中的复选框？

【问题讨论】：

是您的问题，那么如何确保您只选中了 15 个复选框而不再选中？

标签： javascript html checkbox material-components-web

【解决方案1】：

使用一点 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'/>

【讨论】：