How can we disable antd table's checkboxes based on condition? - reactjs

Question

For example there are n no of records I want to enable only selected checboxed reamining all records should be disabled automatically?
please check this below my getCheckboxProps() function check is wrong unable to solve it
Sandbox link
I wanted to disable all non selected checkboxes and here I have no of checboxes can be enabled length we should not cross that length.In my case remaining_total variable.Can anyone help me in right direction?

Answer 1

Your provided link was broken, however one way to disabled all the checkbox in antd table row is to return {disabled: true} on getCheckboxProps function on each cycle. If you have a unique key or item, you can use that to disable specific row, just return {disabled: true} if meet a condition. Here's sample on enabling the first two rows checkbox:
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
};
}
};
Here is a sample of disabling the first 4 rows:
const rowSelection = {
getCheckboxProps: (record) => {
const rowIndex = data.findIndex((item) => item.key === record.key);
return {
disabled: rowIndex < 4 //disable the first 4 rows only
};
}
};
Here's a working sample: