Angular Material如何实现静态不可更改的复选框？

其实有两种常用方案可以实现这个需求，我分别给你拆解一下：

方案一：使用disabled属性（推荐） #

这是最符合语义化的做法，直接给<mat-checkbox>添加disabled属性，就能完全阻止用户的交互操作，同时Angular Material会自动给复选框加上禁用的视觉样式，用户一眼就能看出这个复选框是不可操作的。

如果需要固定选中状态，代码示例如下：

<mat-checkbox disabled [checked]="true">固定选中的静态复选框</mat-checkbox>

如果要固定未选中状态，只需要把[checked]的值改成false即可。

方案二：通过change事件强制锁定状态 #

如果你不想让复选框显示禁用样式，但又要阻止状态切换，就可以用你提供的这种思路：监听change事件，在事件回调里强制重置复选框的状态。

Angular Material的change事件传递的是MatCheckboxChange对象，修改它的checked属性就能覆盖默认的切换行为。你的代码已经实现了固定选中的效果，我把完整示例整理清楚：

组件类代码：

alwaysCheckStatus(e: MatCheckboxChange) {
  // 强制保持选中状态，若要保持未选中则改为false
  e.checked = true;
}

模板代码：

<mat-checkbox (change)="alwaysCheckStatus($event)">视觉正常但不可更改状态的复选框</mat-checkbox>

⚠️ 小提醒：这种方法虽然能锁定状态，但用户点击时还是会有短暂的切换动画，体验上不如disabled方案，所以除非有特殊的视觉需求，否则优先用第一种方案。

内容的提问来源于stack exchange，提问作者Nikolay