React/JS：基于多维数组实现复选框联动禁用与启用

需求说明 #

当数据基于多维数组结构时，实现两组复选框的联动逻辑：

• 第一组（粉色）：若该组任意轨道复选框被勾选，对应总线复选框启用；若组内所有轨道复选框未勾选，总线复选框禁用。
• 第二组（紫色）：规则与第一组完全一致。

实现方案（React为例） #

核心思路是通过状态管理记录轨道复选框的选中状态，实时计算每组的勾选情况，进而控制总线复选框的启用状态。

1. 定义数据结构与初始状态

假设多维数组结构如下，每组包含轨道列表和总线信息：

const groups = [
  {
    name: "粉色组",
    tracks: ["轨道1", "轨道2", "轨道3"],
    bus: "粉色总线"
  },
  {
    name: "紫色组",
    tracks: ["轨道4", "轨道5"],
    bus: "紫色总线"
  }
];

使用useState初始化轨道选中状态，结构与多维数组对应：

const [trackChecked, setTrackChecked] = useState(
  groups.map(group => group.tracks.map(() => false))
);

2. 计算总线禁用状态

编写函数，针对每组判断是否有轨道被选中：

const getBusDisabled = (groupIndex) => {
  // 检查当前组下所有轨道的选中状态，全为false则返回true（禁用总线）
  return trackChecked[groupIndex].every(checked => !checked);
};

3. 渲染复选框并绑定逻辑

遍历数组渲染轨道和总线复选框，处理轨道的选中状态更新，以及总线的禁用属性：

return (
  <div className="container">
    {groups.map((group, groupIndex) => (
      <div key={groupIndex} className={`group ${group.name === "粉色组" ? "pink" : "purple"}`}>
        <h3>{group.name}轨道</h3>
        {group.tracks.map((track, trackIndex) => (
          <label key={trackIndex}>
            <input
              type="checkbox"
              checked={trackChecked[groupIndex][trackIndex]}
              onChange={(e) => {
                // 更新对应轨道的选中状态
                const newTrackChecked = [...trackChecked];
                newTrackChecked[groupIndex][trackIndex] = e.target.checked;
                setTrackChecked(newTrackChecked);
              }}
            />
            {track}
          </label>
        ))}
        <div className="bus-section">
          <label>
            <input
              type="checkbox"
              disabled={getBusDisabled(groupIndex)}
            />
            {group.bus}
          </label>
        </div>
      </div>
    ))}
  </div>
);

4. 样式辅助（可选）

添加简单样式区分两组：

.pink input[type="checkbox"] {
  accent-color: pink;
}
.purple input[type="checkbox"] {
  accent-color: purple;
}
.group {
  margin: 20px;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 8px;
}
.bus-section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #ddd;
}

关键逻辑说明 #

• 状态结构与数据源的多维结构完全对应，确保每组、每个轨道的选中状态可以精准定位和更新。
• 通过every方法快速判断组内轨道是否全未选中，以此决定总线的禁用状态，逻辑简洁高效。
• 状态更新时采用不可变数据模式，避免直接修改原数组导致的状态异常。

内容的提问来源于stack exchange，提问作者Steve Barakat