[英]How to set limitation for mat checkbox in angular 14
Trying to set limitation for checkbox but not working.试图为复选框设置限制但不起作用。 If i select more then 2 check box i want to not allow to select.
如果我 select 超过 2 个复选框,我想不允许 select。 I have tried but not working properly.
我试过但不能正常工作。 If anyone knows please help to find the solutions.
如果有人知道,请帮助找到解决方案。
mauto.component.ts: mauto.component.ts:
toggleSelection = (data: ItemData): void => {
data.selected = !data.selected;
if (data.selected === true) {
if(this.selectData.length <= 1) {
this.selectData.push(data);
} else {
data.selected = false;
alert("You can select only 2");
}
}
Demo: https://stackblitz.com/edit/angular-ivy-enwmdh?file=src%2Fapp%2Fshared%2Fmauto%2Fmauto.component.ts演示: https://stackblitz.com/edit/angular-ivy-enwmdh?file=src%2Fapp%2Fshared%2Fmauto%2Fmauto.component.ts
Create a flag that will tell your template when to start disabling checkbox, and update it inside your toggleSelection()
function.创建一个标志,告诉您的模板何时开始禁用复选框,并在您的
toggleSelection()
function 中更新它。
toggleSelection = (data: ItemData): void => {
...
...
this.disableCheckbox = this.selectData.filter(item => item.selected === true).length >= 2;
...
...
}
Then use it in the template to disable unselected checkboxes, when already 2 are selected.然后在模板中使用它来禁用未选中的复选框,当已经选择了 2 个时。 You should keep the checked boxes enabled, in case if user wants to deselect any of them.
您应该启用复选框,以防用户想要取消选择其中任何一个。
<mat-checkbox
[checked]="data.selected"
(change)="toggleSelection(data)"
(click)="$event.stopPropagation()"
[disabled]="disableCheckbox && !data.selected"
>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.