javascript - Disable all checkboxes within a array in a row

Question

I am trying to disable a set of checkbox within a row. For example,

I have the following

 {availableBendsHostnames?.map((bEnds, indx) => (
          <div key={indx}>
            <div>B-End: {bEnds}</div>
            <div>
              <div>
                <div>
                  {responseMessage !== 'success' &&
                    listOfEvenIpsWithCorrectSubnet?.map((ipAddress, idx) => (
                      <div key={idx}>
                        <FormControlLabel
                          control={
                            <Checkbox
                              name={`ip-${ipAddress}-${indx}`}
                              id={`ip-${ipAddress}-${indx}`}
                              value={ipAddress}
                              disabled={!isChecked[idx] && isDisabled}
                              onChange={(e) => handleIPSelected(e, idx, indx)}
                            />
                          }
                          label={ipAddress}
                        />
                      </div>
                    ))}
                </div>
              </div>
            </div>
          </div>
        ))}

this out put as the following

row a 

checkbox0 (name = ip-11.0.0.16/31-0, index = ip-11.0.0.16/31-0),
checkbox1 (name = ip-11.0.0.18/31-0, index = ip-11.0.0.18/31-0), 
checkbox2 (name = ip-11.0.0.20/31-0, index = ip-11.0.0.20/31-0)

row b

checkbox0 (name = ip-11.0.0.16/31-1, index = ip-11.0.0.16/31-1),
checkbox1 (name = ip-11.0.0.18/31-1, index = ip-11.0.0.18/31-1), 
checkbox2 (name = ip-11.0.0.20/31-1, index = ip-11.0.0.20/31-1)

row b

checkbox0 (name = ip-11.0.0.16/31-2, index = ip-11.0.0.16/31-2),
checkbox1 (name = ip-11.0.0.18/31-2, index = ip-11.0.0.18/31-2), 
checkbox2 (name = ip-11.0.0.20/31-2, index = ip-11.0.0.20/31-2)

What I would like to happen is when the user checks on

checkbox0 (name = ip-11.0.0.16/31-0, index = ip-11.0.0.16/31-0)

I would like to disable the other checkbox in that row.

Here is what I have so far,

in my handle selected method I have the following

 const [isChecked, setIsChecked] = useState({ checked: {} });
const [isDisabled, setIsDisabled] = useState();

const handleIPSelected = (selectIPIndx,) => {

    setIsChecked((previousState) => ({
        checked: {
          ...previousState.checked,
          [selectIPIndx]: !previousState.checked[selectIPIndx],
        },
      }));
    }

And I have a useEffect

    useEffect(() => {
    const checkedCount = Object.keys(isChecked).filter(
      (key) => isChecked[key] && Object.keys(isChecked[key]).length !== 0
    ).length;

    const disabled = checkedCount > 0;
    setIsDisabled(disabled);
  }, [isChecked]);

At the moment with this code as soon as I click on one checkbox it disables all checkboxes not just the one in the row. Any help would be appreciated.

Answer 1

You need to save for each checked item it's row.
There are also small errors, I fixed them to make it work:

  const [isChecked, setIsChecked] = useState({});
  const [disabledRows, setDisabledRows] = useState([]);

  useEffect(() => {
    const disabledRows = Object.keys(isChecked)
      .filter((key) => isChecked[key].checked)
      .map((key) => isChecked[key].row);

    setDisabledRows(disabledRows);
  }, [isChecked]);

  const responseMessage = "error";
  const availableBendsHostnames = [1, 2, 3];
  const listOfEvenIpsWithCorrectSubnet = [4, 5, 6];

  const handleIPSelected = (e, idx, row) => {
    const { id } = e.currentTarget;

    setIsChecked((previousState) => ({
      ...previousState,
      [id]: {
        checked: !previousState[id]?.checked,
        row
      }
    }));
  };

You can refer to this Code Sandbox working example