Disabled input form with checkbox with reactjs

Question

Please help me,

I want to disable my box input value when I active my checklist box...

<FormGroup check className="mb-3">
        <Label check htmlFor="partial_shipment">
          <Input
            type="checkbox"
            name="partial_shipment"
            id="partial_shipment"
            onChange={onChange}
          />{" "}
          Apakah Partial Shipment?
        </Label>
      </FormGroup>

After I checklist my check box, I want disable...my this box input :

<FormGroup>
            <Label htmlFor="total_kemasan">Total Kemasan</Label>
            <Input
              type="number"
              name="total_kemasan"
              id="total_kemasan"
              onChange={onChange}
            />
          </FormGroup>

what I must todo??? with REACT HOOKS

Dharman · Accepted Answer · 2020-10-27 04:39:41Z

1

If you want to disable the checkbox when checked you can change the disabled prop of the input.

const [checkBoxValue, setCheckBoxvalue] = useState(false);

<FormGroup>
        <Label htmlFor="total_kemasan">Total Kemasan</Label>
        <Input
          type="number"
          name="total_kemasan"
          disabled = {checkBoxValue}
          id="total_kemasan"
          onChange={handleCheckBox}
        />
      </FormGroup>

On your onChange handler, you will get event.target.checked -

handleCheckBox = e => {
if(e.target.checked){
setCheckBoxValue(true);
}else{
setCheckBoxValue(false);
}

You can change the value of the state in the handler and disable the checkbox when it is checked.

edited Oct 27, 2020 at 4:39

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Oct 27, 2020 at 4:34

dhellryder

911 silver badge8 bronze badges

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

Collectives™ on Stack Overflow

Disabled input form with checkbox with reactjs

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