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

这样，它也变得无法对焦，并且您将无法使用键盘对其进行检查。

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

Answer 2

如果我理解正确，则用户永远不能手动切换复选框。相反，它将根据输入值以编程方式进行切换。

您可以非常简单地阻止默认的click行为，因此，当单击复选框时，什么也不会发生：

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

  <input #infoBox matInput type="text">

</mat-checkbox>

Answer 3

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

JS 文件：

change(){
checked=true;
}

如何使Angular材质中的Mat-复选框不可点击

3 个答案: