Javascript 禁用行中数组内的所有复选框

我正在尝试禁用一行中的一组复选框。比如说,

我有以下几点

 {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>
        ))}

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)

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

const handleIPSelected = (selectIPIndx,) => {

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

我希望发生的是当用户检查

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

我想禁用该行中的其他复选框

这是我到目前为止得到的

在我的handleselected方法中，我有以下内容

 {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>
        ))}

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)

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

const handleIPSelected = (selectIPIndx,) => {

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

我有一个有用的效果

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

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

---

目前，对于这段代码，只要我单击一个复选框，它就会禁用所有复选框，而不仅仅是行中的复选框。任何帮助都将不胜感激。

您需要为其所在行的每个选中项目保存
还有一些小错误，我修复了它们以使其正常工作：

  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
      }
    }));
  };

您可以参考这个工作示例