javascript - 如果复选框选中禁用其他，如果未选中启用所有反应

Question

我陷入了一种情况，我需要禁用除选中的复选框之外的复选框。

复选框是在 API 的帮助下动态创建的，密钥将传递给每个复选框。有没有办法实现上述要求。

谢谢

{this.state.imageinfo.map((image, key) => {
          return(
            <div key={key}>
              <input type="checkbox"
                onClick={(e)=> this.setCoverImage(e,key)}>Cover Image
              <div className="delete-image" onClick={() => this.removeImage(key)}>
                &times;
              </div>
            </div>
          );
        })
      }

Answer 1

您可以让该复选框更改保存在状态中的布尔值，并使所有其他复选框的 disabled 属性等于该状态对象。

Answer 2

您需要在您所在州设置的数组中设置一个选中的关键字，该关键字是布尔值。每当调用函数时，它将仅在提供键的数组元素中设置检查关键字。数组中的其余选中关键字将被删除。然后您将在您的状态中设置更新的数组。像这样。

setCoverImage=(key)=>{
const ItemKeyTobeChecked=key;
const imageinfoArray=this.state.imageinfo;

for(var i=0;i<imageinfoArray.length;i++){
 if(key===i){
  imageinforArray[key].checked=true;
 } 
 else{
   if(imageinforArray[i].checked){
    delete imageinforArray[i].checked
   }
 }
}
this.setState({
imageinfo:imageinfoArray
})
}

Answer 3

使用收音机而不是复选框

复选框的行为是多选，而单选则不是

如果你想使用复选框：

setCoverImage(e, key) {
    ...
    this.setState({active: key})
}
render() {
    ...
    <input type="checkbox"
            onClick={(e)=> this.setCoverImage(e,key)} checked={this.state.active === key}>