执行onChange方法后如何禁用复选框？

Question

I want to be able to disable a checkbox once I check on the checkbox and execute the onChange method.

I was able to find a way to do this, but once multiple items are checked only the recently checked checkbox is disabled.

The disable method is inside a component class before the render method

Disable = id => {
  document.getElementById(id).disabled = true;
  //another method to execute onchange
};

<span>
  <input
    type="checkbox"
    className="form-check-input"
    onChange={this.Disable}
    value=""
  />
</span>;

The checkbox is inside the render method. One the user checks the checkbox the checkbox needs to check and disable it self

Answer 1

Some notice points:

• use camelCase for function name
• use props value to make the checkbox fully controlled
• use props disabled to disable input element
• set the related state inside the handler function
• no need for document.getElementById in your current situation
• handler event is not id , if you just need id , pass it as a param this.handler(id)

Demo:

 const App = () => { const [checked, setChecked] = React.useState(false); const [status, setStatus] = React.useState(true); const onChangeHandler = () => { setChecked(!checked); setStatus(false); }; return ( <div className="App"> <input type="checkbox" value={checked} disabled={!status} onChange={onChangeHandler} /> </div> ); }; ReactDOM.render(<App />, document.getElementById("root"));

 <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>

Answer 2

you should have to attach id on element .

 let Disable=(id)=>{ if(id){ document.getElementById(id).disabled = true } }

 <span> <input type="checkbox" className="form-check-input" onChange="Disable(this.id)" id="one" value=""/> <input type="checkbox" className="form-check-input" onChange="Disable(this.id)" id="two" value=""/> <input type="checkbox" className="form-check-input" onChange="Disable(this.id)" id="three" value=""/> </span>

Answer 3

passing the event in an anonymous arrow function and accepting it as an argument in the eventHandler(component method) and using the event.target there is the appropriate way of doing this in such situations that you need to access the caller.

class Stack extends Component {
  Disable = event => {
    event.target.disabled = true;
    //another method to execute onChange
  };

  render() {
    return (
      <span>
        <input
          type="checkbox"
          className="form-check-input"
          onChange={event => this.Disable(event)}
          value=""
        />
        <input
          type="checkbox"
          className="form-check-input"
          onChange={event => this.Disable(event)}
          value=""
        />
        <input
          type="checkbox"
          className="form-check-input"
          onChange={event => this.Disable(event)}
          value=""
        />
      </span>
    );
  }
}