Javascript 在React中按名称禁用和取消选择复选框

我有多个复选框，但条件是禁用特定名称复选框。我已经做到了这一点，但问题是，当您先选中其他复选框，然后选中要禁用的复选框时，复选框仍然存在。 如果你想看的话，我已经在stackblitz上发布了代码。 所以在下面的代码中，我想在点击“所有年龄”时禁用所有复选框。但是，当您选择其他复选框，然后选择“所有年龄”复选框时，该复选框仍然存在，您可以取消选中该复选框。如何删除禁用后选中的复选框

//无状态功能组件示例
//示例类组件
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
checkedItems:{}
};
}
handleChange=（事件，formKey）=>{
const{name，checked}=event.target；
const updatedCheckedItems={…this.state.checkedItems，[名称]：checked}；
这是我的国家(
{
checkedItems：更新的checkedItems
},
（）=>console.log（this.state.checkedItems）
);
};
渲染=（）=>{
const checkedValues={…this.state.checkedItems}；
常量复选框=[
{
名称：“3-5”，
关键：“1”，
标签：“3-5”
},
{
名称：“6-7”，
键：“2”，
标签：“6-7”
},
{
名称：“8-10”，
关键：“3”，
标签：“8-10”
},
{
名称：“11-13”，
关键：“4”，
标签：“11-13”
},
{
姓名：“14-18”，
钥匙：“5”，
标签：“14-18”
},
{
名称：“18+”，
关键：“6”，
标签：“18+”
},
{
姓名：“所有年龄”，
钥匙：“7”，
标签：“所有年龄段”
}
];
返回(
应用程序组件
{复选框.映射（项=>(
{item.name}
))}
)
}
}
//渲染它
ReactDOM.render(
,
document.getElementById（“react”）
);
在您的
handleChange
功能中，您应该进行如下更改：

  handleChange = (event, formKey) => {
    const { name, checked } = event.target;
    // Changed line
    const updatedCheckedItems = name === 'All ages' ? { [name]: checked } : { ...this.state.checkedItems, [name]: checked };
    this.setState(
      {
        checkedItems: updatedCheckedItems
      },
      () => console.log(this.state.checkedItems)
    );
  };

如果复选框名称为
All ages
，则应删除所有其他复选框，否则，只需像往常一样在状态对象上再添加一个属性即可。
在
handleChange
函数中，应按以下方式进行更改：

  handleChange = (event, formKey) => {
    const { name, checked } = event.target;
    // Changed line
    const updatedCheckedItems = name === 'All ages' ? { [name]: checked } : { ...this.state.checkedItems, [name]: checked };
    this.setState(
      {
        checkedItems: updatedCheckedItems
      },
      () => console.log(this.state.checkedItems)
    );
  };

如果复选框名称为
All ages
，则应删除所有其他复选框，否则，只需像往常一样在state对象上添加一个属性即可。
将此选项用于在选择最后一个复选框时清除所有其他选中的属性。希望我能正确地理解你


当您选择最后一个选项时，将此选项用于清除所有其他选定选项。希望我能正确地理解你