Question

<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，则无法取消选中它。该怎么做？

Answer 1

您可以将[readonly]属性与内部条件一起使用

例如，如果您希望forA是只读的（如果选中了forB和forC，则可以这样做。

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

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

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

Answer 2

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

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

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

2 个答案: