如何使 Angular 材质中的 mat-checkbox 无法点击

Question

我可以mat-checkbox禁用我的功能，但希望保持与启用时相同的 css。当输入文本有值时，复选框将被选中，就像我在下面所做的那样：

<mat-checkbox [disableRipple]="true" [checked]="option.controls.text.value !== ''">
  <input #infoBox matInput formControlName="info" class="input-other" maxlength="100" type="text" [value]="option.controls.text.value">
</mat-checkbox>

Answer 1

如果我理解正确，用户应该永远无法手动切换复选框。相反，它将根据输入值以编程方式切换。

您可以非常简单地阻止默认click行为，因此单击复选框时不会发生任何事情：

<mat-checkbox [checked]="infoBox.value !== ''"
              [disableRipple]="true"
              (click)="$event.preventDefault()">

  <input #infoBox matInput type="text">

</mat-checkbox>

Answer 2

这样它也变得不可聚焦，您将无法使用键盘检查它。

    <mat-checkbox
        [checked]="state"
        [class.mat-checkbox-disabled]="false"
        disabled>
    </mat-checkbox>

Answer 3

使用禁用属性

 <mat-checkbox [ngModel]="checkboxvalue" [disabled]="true"/>

或者

<mat-checkbox [ngModel]="checkboxvalue" disabled/>

参考示例