我来帮你搞定这个问题！你遇到的情况是因为直接绑定(click)事件会绕过mat-list-option的禁用状态校验，而且在Angular Material 5版本中，我们得用组件原生的选择事件来处理交互，而非DOM原生的点击事件。

问题根源 #

当你给mat-list-option加上[disabled]属性时，组件本身会禁用复选框的原生交互，但你绑定的(click)是DOM级别的点击事件，它不会被组件的禁用状态拦截，所以即便选项被禁用，点击事件依然会触发，看起来复选框还能操作。

解决方案 #

我们需要改用Angular Material提供的(selectionChange)事件来处理选项的选择变更，同时给mat-list-option绑定[value]属性，这样当选项被禁用时，该事件不会被触发，完美解决你的问题。

修改后的代码示例

首先更新模板代码：

<mat-selection-list>
  <mat-list-option 
    *ngFor="let activityType of activityTypes" 
    [value]="activityType"
    [selected]="isActivityTypeSelected(activityType)" 
    [disabled]="closedCalendarEvent"
    (selectionChange)="handleActivityTypeSelection($event)">
    {{activityType | translate}}
  </mat-list-option>
</mat-selection-list>

然后在组件类中实现对应的事件处理函数：

handleActivityTypeSelection(event: MatListOptionSelectionChange) {
  // 过滤掉非用户主动触发的选择变更（比如代码修改selected属性导致的变更）
  if (!event.isUserInput) return;
  
  const selectedActivityType = event.source.value;
  this.addSelectedActivityType(selectedActivityType);
}

额外检查点 #

• 确认closedCalendarEvent的类型：确保它是标准布尔值（true/false），如果是异步获取的值，要保证模板渲染时已经正确赋值。
• 排查自定义CSS干扰：检查是否有自定义样式覆盖了mat-list-option[disabled]的默认样式，比如设置了pointer-events: auto或者修改了透明度，这会让禁用的选项看起来依然可点击。
• 版本兼容性：确保你的Angular Material版本和Angular 5匹配（Angular 5对应@angular/material 5.x版本），不同版本的API可能存在细微差异。

这样修改后，当closedCalendarEvent为true时，mat-list-option会被正确禁用，复选框无法点击，也不会触发选择事件。

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