如何禁用DevExtreme dxList中的指定复选框

当使用dxList的showSelectionControls="true"时，列表会自动生成复选框，无法直接通过单独的dx-check-box组件的disabled属性控制指定条目。要实现指定复选框禁用，需要手动接管复选框渲染并绑定数据源的禁用标识，步骤如下：

1. 给数据源添加禁用标识字段 #

给每个列表项添加isDisabled字段，标记该条目是否需要禁用：

// 示例数据源
ListDataSource = [
  { text: "条目1", isDisabled: false },
  { text: "条目2", isDisabled: true }, // 需禁用的条目
  { text: "条目3", isDisabled: false }
];

2. 修改dxList模板，手动渲染复选框 #

关闭列表内置的选择控件，在item模板中手动添加dx-check-box，并绑定disabled属性到数据源的isDisabled字段：

<dx-list 
  [items]="ListDataSource" 
  [(selectedItems)]="selectedItems" 
  (onSelectionChanged)="onSelectionChanged($event)"
>
  <div *dxTemplate="let item of 'item'">
    <dx-check-box 
      [disabled]="item.isDisabled"
      [(value)]="item.selected"
      (onValueChanged)="onItemCheckboxChange(item, $event)"
    ></dx-check-box>
    <span>{{ item.text }}</span>
  </div>
</dx-list>

3. 同步选中状态到selectedItems #

手动处理复选框的选中事件，维护selectedItems数组的状态：

selectedItems: any[] = [];

onItemCheckboxChange(item: any, event: any) {
  if (event.value) {
    // 选中时添加到selectedItems，跳过禁用项
    if (!item.isDisabled && !this.selectedItems.includes(item)) {
      this.selectedItems.push(item);
    }
  } else {
    // 取消选中时从数组移除
    const index = this.selectedItems.findIndex(i => i === item);
    if (index > -1) {
      this.selectedItems.splice(index, 1);
    }
  }
}

4. 可选：添加禁用样式（优化视觉体验） #

通过CSS给禁用的列表项添加不可点击的视觉效果：

.dx-list-item:has(.dx-checkbox.dx-state-disabled) {
  pointer-events: none;
  opacity: 0.6;
}

为什么之前的方法无效？ #

之前单独使用dx-check-box组件的方式，没有和dxList的数据源绑定，且列表内置的复选框是自动生成的，无法通过外部组件的属性直接控制。必须手动接管复选框渲染，才能实现指定条目的禁用逻辑。

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