Angular Material中选中mat-checkbox启用按钮、无选中时禁用的实现问题

你当前的逻辑仅判断了触发change事件的单个复选框的选中状态，没有统计所有选中项的总数量，因此只要有一个复选框取消选中，就会直接把按钮设为禁用，忽略了其余已选中的复选框。

你已经使用了Angular Material自带的SelectionModel做多选管理，直接基于它的选中列表长度判断按钮状态即可，不需要手动维护单个复选框的触发结果：

1. TypeScript代码修改 #

import { SelectionModel } from '@angular/cdk/collections';

export class PaginaPrincipal implements OnInit {
  // 初始化多选模型，第一个参数true代表允许多选，第二个参数为初始选中项
  selection = new SelectionModel<any>(true, []);

  // 动态计算按钮禁用状态：无选中项时禁用
  get buttonDisable(): boolean {
    return this.selection.selected.length === 0;
  }

  // 原有changeCheck方法可直接删除，无需额外监听复选框变更
}

2. HTML代码修改 #

移除复选框change事件中多余的changeCheck调用即可：

<button mat-raised-button [disabled]="buttonDisable" (click)="procesarClic()">Enviar</button>

<ng-container matColumnDef="seleccionVarios">
  <mat-header-cell *matHeaderCellDef>
    <label class="tituloTabla-verdoso text-center"> CHECKBOX </label>
  </mat-header-cell>
  <mat-cell *matCellDef="let element">
    <mat-checkbox #checkbox 
      (click)="$event.stopPropagation()"
      (change)="$event ? selection.toggle(element) : null"
      [checked]="selection.isSelected(element)">
    </mat-checkbox>
  </mat-cell>
</ng-container>

SelectionModel的selected属性会自动同步所有被选中的行数据，通过getter动态计算按钮状态，只要选中项数量大于0按钮自动启用，无选中项时自动禁用，不会出现单复选框操作影响全局状态的问题。

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