Angular中全选复选框选中禁用复选框的问题解决

PrimeNG的p-tableHeaderCheckbox默认会选中所有行，不管行内的p-tableCheckbox是否处于禁用状态，要解决这个问题，需要自定义全选逻辑并修正表头复选框的状态判断：

1. 实现自定义全选方法 #

在组件类中编写onSelectAll方法，过滤掉禁用状态的行，只将可选中的行加入选中数组：

onSelectAll(event: any) {
  if (event.checked) {
    // 筛选出非禁用状态的行
    this.selectedValues = this.metricExecutionList.filter(item => 
      !['Initiated', 'Queued', 'Running', 'Processing'].includes(item.status)
    );
  } else {
    this.selectedValues = [];
  }
}

2. 修正表头复选框的状态绑定 #

默认表头复选框无法自动识别禁用行的选中状态，需要手动绑定checked和disabled属性：

修改模板中的p-tableHeaderCheckbox：

<p-tableHeaderCheckbox 
  (onHeaderCheckboxToggle)="onSelectAll($event)"
  [checked]="selectedValues.length === metricExecutionList.filter(item => 
    !['Initiated', 'Queued', 'Running', 'Processing'].includes(item.status)
  ).length && metricExecutionList.length > 0"
  [disabled]="metricExecutionList.filter(item => 
    !['Initiated', 'Queued', 'Running', 'Processing'].includes(item.status)
  ).length === 0"
></p-tableHeaderCheckbox>

3. 优化代码（可选） #

为避免重复编写状态判断逻辑，可在组件类中提取一个判断方法：

isRowSelectable(item: any): boolean {
  return !['Initiated', 'Queued', 'Running', 'Processing'].includes(item.status);
}

之后在模板和方法中复用该方法：

• 行内复选框的禁用判断：

<p-tableCheckbox 
  [value]="metricExecutionList" 
  [disabled]="!isRowSelectable(metricExecutionList)"
></p-tableCheckbox>

• 表头复选框的状态：

<p-tableHeaderCheckbox 
  (onHeaderCheckboxToggle)="onSelectAll($event)"
  [checked]="selectedValues.length === metricExecutionList.filter(item => isRowSelectable(item)).length && metricExecutionList.length > 0"
  [disabled]="metricExecutionList.filter(item => isRowSelectable(item)).length === 0"
></p-tableHeaderCheckbox>

• 全选方法：

onSelectAll(event: any) {
  if (event.checked) {
    this.selectedValues = this.metricExecutionList.filter(item => this.isRowSelectable(item));
  } else {
    this.selectedValues = [];
  }
}

这样修改后，点击全选时只会选中可选择的行，表头复选框会正确显示所有可选中行的选中状态，且当没有可选中行时会自动禁用。

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