Angular Slickgrid：如何动态启用/禁用复选框（非显示/隐藏）

你当前用selectableOverride控制的是复选框的显示与否，但如果要实现**动态禁用（灰化、无法选中）**复选框，其实可以直接复用相关配置，同时配合样式让禁用状态更直观。

实现方案 #

1. 用selectableOverride控制复选框可选性
   修改原逻辑，根据业务条件返回true或false——返回false时，该行复选框会被禁用，无法被选中：

   export class Example1 implements OnInit {
     prepareGrid() {
       this.gridOptions = {
         enableRowSelection: true,
         enableCheckboxSelector: true,
         checkboxSelector: {
           // 根据业务规则判断是否允许选中，返回false则禁用复选框
           selectableOverride: (row: number, dataContext: any, grid: any) => {
             // 示例：仅允许id为奇数的行被选中，偶数行复选框禁用
             return dataContext.id % 2 === 1;
           }
         },
         multiSelect: false,
         rowSelectionOptions: {
           selectActiveRow: true,
         },
         // 可选：添加样式规则，让禁用行的复选框视觉上更明确
         cellClassRules: {
           'disabled-checkbox-row': (params) => params.data.id % 2 === 0
         }
       };
     }
   }
   

2. 自定义禁用样式（可选）
   若需要强化禁用状态的视觉效果，可在组件样式中添加：

   .disabled-checkbox-row .ag-checkbox-input {
     opacity: 0.4;
     cursor: not-allowed;
   }
   

原理说明 #

• selectableOverride返回false时，ag-Grid会自动拦截该复选框的选中事件，同时默认会给复选框添加基础禁用样式；自定义CSS可以让效果更贴合你的产品风格。
• 区分：如果是要隐藏复选框，保持你原本的逻辑即可；如果是要禁用（显示但不可选），就用上述方案。

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