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行为，因此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/>

参考示例

Answer 4

您可以在复选框元素上使用 css 属性。

pointer-events: none;

Answer 5

<mat-checkbox [checked]="checked"
              (click)="change()">

JS文件：

change(){
checked=true;
}