How can I disable an input textbox when a checkbox is checked?

Question

I'm new to React and looking for a clue to disable an input text box when a corresponding checkbox is ticked. Below is my code:

const [checked, setChecked] = useState(false);
const [disable, setDisable] = useState(true);

<div>
  <div>
    <input
      type="checkbox"
      value={!checked}
      onChange={() => setDisable(!disable)}
      disable={!disable}
    />
  </div>

  <div>
    <input
      type="text"
      placeholder="Enter correct detail"
      disabled={!disable}
      onChange={() => setChecked(true)}
    />
  </div>
</div>;

The above code works for only a row. How do I implement this logic to be able to work for several other rows.

What do you mean by rows? Is the above component used as a single row or has multiple rows inside it. — Tushar Shahi
– Tushar Shahi, Commented Jul 7, 2021 at 17:21
Easiest way: you have to make sure each row controls its own state, basically each row can be a component that will have its own setState pair (if you really need both). — Alberto Anderick Jr
– Alberto Anderick Jr, Commented Jul 7, 2021 at 17:22

underscore · Accepted Answer · 2021-07-07 17:24:56Z

1

You can create an another component and isolate the state to that

Component: InputWithCheckBox

const InputWithCheckBox = () => {

  const [checked, setChecked] = useState(false);
  const [disable, setDisable] = useState(true);

  return (
    <>
      <div>
        <input
          type="checkbox"
          value={!checked}
          onChange={() => setDisable(!disable)}
          disable={!disable}
        />
      </div>

      <div>
        <input
          type="text"
          placeholder="Enter correct detail"
          disabled={!disable}
          onChange={() => setChecked(true)}
        />
      </div>
    </>
  )

}

Import the InputWithCheckBox where you want to display it. Then you can add multiple rows as you want

<div>

  <InputWithCheckBox/>
  <InputWithCheckBox/>


</div>;

answered Jul 7, 2021 at 17:24

underscore

6,9277 gold badges44 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I disable an input textbox when a checkbox is checked?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related