CODEWITHSUNDEEP
javascripthtmlreactjsinput
George Silva
George Silva

Reputation: 385

How to disable a checkbox after executing onChange method?

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

Upvotes: 1

Views: 3404

Answers (3)

Abbas Hosseini
Abbas Hosseini

Reputation: 1643

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

Upvotes: 0

Manikant Gautam
Manikant Gautam

Reputation: 3591

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>

Upvotes: 1

keikai
keikai

Reputation: 15156

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>

Upvotes: 3

Related Questions