Angular 2+实现选中3个复选框后禁用其余复选框的方案

这个问题我之前也帮人处理过，核心就是要区分已选中的复选框和未选中的，不能一刀切禁用所有。咱们可以通过一个精准的判断逻辑来实现需求：选中3个后，只禁用未被选中的复选框，已选中的保持可点击状态，这样用户就能取消已选的来更换选中集合。

核心逻辑思路 #

每个复选框的disabled状态只需要满足一个条件：

当已选中的条目数量等于3，并且当前复选框对应的行未被选中时，才禁用该复选框。

这样既限制了最多选中3个，又保留了修改已选集合的灵活性。

组件代码实现 #

首先确保你已经引入了SelectionModel（Angular CDK提供的多选管理工具），然后在组件中添加一个判断复选框是否禁用的方法：

import { Component } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { SelectionModel } from '@angular/cdk/collections';

// 定义你的表格数据类型
export interface TableRow {
  // 替换成你的实际字段，比如id、name等
  id: number;
  name: string;
}

@Component({
  selector: 'app-your-table',
  templateUrl: './your-table.component.html',
  styleUrls: ['./your-table.component.css']
})
export class YourTableComponent {
  // 表格列定义
  displayedColumns: string[] = ['select', 'id', 'name'];
  // 表格数据源
  dataSource = new MatTableDataSource<TableRow>([
    {id: 1, name: '行1'},
    {id: 2, name: '行2'},
    {id: 3, name: '行3'},
    {id: 4, name: '行4'},
    {id: 5, name: '行5'}
  ]);
  // 初始化多选模型，允许批量选择
  selection = new SelectionModel<TableRow>(true, []);

  // 判断当前行的复选框是否需要禁用
  isCheckboxDisabled(row: TableRow): boolean {
    // 关键逻辑：选中数满3个，且当前行未被选中 → 禁用
    return this.selection.selected.length === 3 && !this.selection.isSelected(row);
  }

  // 表头全选/取消全选的方法（可选）
  masterToggle() {
    if (this.selection.selected.length === this.dataSource.data.length) {
      this.selection.clear();
    } else {
      // 只有当选中数未满3个时才允许全选
      if (this.selection.selected.length < 3) {
        this.selection.select(...this.dataSource.data);
      }
    }
  }
}

模板代码实现 #

在表格的复选框列中，将[disabled]绑定到我们刚才定义的isCheckboxDisabled(row)方法，同时处理表头复选框的禁用状态：

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <!-- 复选框列 -->
  <ng-container matColumnDef="select">
    <th mat-header-cell *matHeaderCellDef>
      <mat-checkbox 
        (change)="masterToggle()"
        <!-- 表头复选框：当选中数满3个时禁用 -->
        [disabled]="selection.selected.length === 3"
        [checked]="selection.selected.length === dataSource.data.length && selection.selected.length > 0">
      </mat-checkbox>
    </th>
    <td mat-cell *matCellDef="let row">
      <mat-checkbox 
        (change)="selection.toggle(row)"
        [checked]="selection.isSelected(row)"
        <!-- 行复选框：绑定自定义的禁用判断方法 -->
        [disabled]="isCheckboxDisabled(row)">
      </mat-checkbox>
    </td>
  </ng-container>

  <!-- 其他列（示例） -->
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef> ID </th>
    <td mat-cell *matCellDef="let row"> {{row.id}} </td>
  </ng-container>

  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> 名称 </th>
    <td mat-cell *matCellDef="let row"> {{row.name}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

关键细节说明 #

1. 行复选框的禁用逻辑：通过isCheckboxDisabled方法精准控制，只禁用未选中的行，已选中的行依然可以取消选择，让用户能灵活调整选中集合。
2. 表头复选框的处理：当选中数满3个时禁用表头复选框，避免用户误触全选导致超过数量限制；同时修改masterToggle方法，只有选中数未满3个时才允许全选。
3. SelectionModel的初始化：第一个参数设为true表示允许多选，这是实现批量选择的基础。

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