我们如何根据条件禁用 antd table 的复选框？

Question

例如，有 n 条记录我只想启用选中的复选框，所有记录都应该被自动禁用吗？ 请检查下面我的 getCheckboxProps() 函数检查错误无法解决它

Sandbox link

我想禁用所有未选中的复选框，在这里我没有可以启用长度的复选框，我们不应该超过该长度。在我的情况下，remaining_total 变量。谁能帮助我正确的方向？

Answer 1

您提供的链接已损坏，但是禁用 all antd 表格行中的复选框的一种方法是在每个循环的getCheckboxProps 函数上返回{disabled: true}。如果你有一个唯一的键或项目，你可以用它来禁用特定的行，如果满足一个条件就返回{disabled: true}。以下是启用前两行复选框的示例：

const data = [
  {
    key: "1",
    name: "John Brown",
    age: 32,
    address: "New York No. 1 Lake Park"
  },
  {
    key: "2",
    name: "Jim Green",
    age: 42,
    address: "London No. 1 Lake Park"
  },
  {
    key: "3",
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park"
  },
  {
    key: "4",
    name: "Bon Jov",
    age: 99,
    address: "Sidney No. 1 Lake Park"
  },
  {
    key: "5",
    name: "User 5",
    age: 99,
    address: "Sidney No. 1 Lake Park"
  },
  {
    key: "6",
    name: "User 6",
    age: 99,
    address: "Sidney No. 1 Lake Park"
  }
];

const rowSelection = {
  getCheckboxProps: (record) => {
    const rowIndex = data.findIndex((item) => item.key === record.key);
    return {
      disabled: rowIndex > 1 //enable first 2 rows only
    };
  }
};

以下是禁用前 4 行的示例：

const rowSelection = {
  getCheckboxProps: (record) => {
    const rowIndex = data.findIndex((item) => item.key === record.key);
    return {
      disabled: rowIndex < 4 //disable the first 4 rows only
    };
  }
};

这是一个工作示例：