在某些情况下不应取消选中复选框答案

【问题标题】：shouldn't uncheck checkbox in certain conditions在某些情况下不应取消选中复选框
【发布时间】：2020-02-24 07:11:54
【问题描述】：

<input type="checkbox" [(ngModel)]="rowData.forA">  // checkbox A
<input type="checkbox" [(ngModel)]="rowData.forB">  // checkbox B
<input type="checkbox" [(ngModel)]="rowData.forC">  // checkbox C

我有这些复选框。还有一个模型：

class Book {
  name: string;
  forA: boolean;
  forB: boolean;
  forC: boolean;
}

forA forB forC 表示这本书应该在条件 A、条件 B 或条件 C 中使用。

在某些情况下，如果复选框 A 被选中，并且它用于一种条件 A，则不能取消选中它。该怎么做？

【问题讨论】：

只需将readonly 属性添加到您不希望用户取消选中的任何一个上。所以首先，检查哪个checkbox被选中，如果它有附加条件，通过JS或JQuery或其他进入并添加只读属性？

标签： html angular checkbox

【解决方案1】：

您可以使用 [readonly]attribute 和内部条件

例如，如果您希望 forA 在选中 forB 和 forC 时为只读，则可以这样做。

<input [readonly]="rowData.forB && rowData.forC" [(ngModel)]="rowData.forA">

现在，如果您不想要readonly，但正如评论中所说，复选框会自动检查条件，您需要执行以下操作

<input [checked]="rowData.forB && rowData.forC" [(ngModel)]="rowData.forA">

【讨论】：

但我不希望它是只读的。我想要的是，如果取消选中已被其他人使用的字段，复选框会自动选中。

【解决方案2】：

您可以根据自己的情况使用$event.preventDefault()。这是如果rowData.forB 是true，则不允许检查复选框的示例：

<input type="checkbox" 
       [(ngModel)]="rowData.forA" 
       (click)="rowData.forB ? $event.preventDefault() : ''">

【讨论】：