环境

• @angular/cli    v9.0.3
• @angular/material    v9.2.4

效果

• 选中: 着色，勾不取消
• 未选中: 灰色，但是勾不取消

Material官方例子:

官方例子没有给出这样的解决方案，这就要开动我们自己的脑筋了~

思路

1. 保持checked状态不变，点击之后也不能更改checked状态
2. 用click代替api中的change事件

源码

   <mat-checkbox color="primary" class="app-box-safe-checkbox"
       [checked]="alwayTrue" [ngClass]="{disabled: !action.checked}"
       [disabled]="!action.checked"
       (click)="action.checked=!action.checked;onValueChange(cdnDataChild.key,action.checked)">
       {{action.title}}
   </mat-checkbox>

重点:

通过注入MAT_CHECKBOX_DEFAULT_OPTIONS属性更改MatCheckboxDefaultOptions中的clickAction属性为'noop'即可实现。

官网例子

    // checkbox永久选中
    alwayTrue: boolean;
    
    
    constructor(
        @Inject(MAT_CHECKBOX_DEFAULT_OPTIONS) public matCheckBoxOptions: MatCheckboxDefaultOptions,
    ) {
        this.alwayTrue = true;
        this.matCheckBoxOptions.clickAction = 'noop';
        
    }
    onValueChange(): void {
        // your code
    }

// 禁用样式，加!important
@mixin disabled($bgColor: rgba(0, 0, 0, 0.1), $textColor: #ababab, $cursor: not-allowed) {
    background-color: ($bgColor) !important;
    // background-image: none;
    // opacity: 0.26;
    // background-image:none;
    color: $textColor !important;
    cursor: $cursor;
}
.disabled {
        @include disabled(transparent, rgba(#dddddd, 1), pointer);
}

总结

• 要懂得使用官方API，这才是最权威的(写源码的人再不懂自己的源码，也比别人解读的强)
• 并非最优解，但是目前只想到(各种google之后)这种方式