React js: How to disable text input based on a checkbox value?

Question

I am creating a form used to add a new "item" to an online shopping website. ON this form, there is a test input box where the user should include the serial number of the item they are adding. And directly under it there is a checkbox which If checked will automatically assign a serial number incase the user doesn't want to use a custom serial number. So if the checkbox is clicked or checked (true), then the text input box should be disbaled. The below is the code I used. When the page first opens, if you click the checkbox for the 1st time, the text box is disabled. But if you remove the checkmark, the text input is still disabled while it should be enabled. Can anyone help? I'm very new at this. Its as if the new values for the checkbox are not being taken into consideration.

CODE:

import React from 'react'

import {
  CButton,
  CCard,
  CCardBody,
  CCardFooter,
  CCardHeader,
  CCol,
  CForm,
  CFormGroup,
  CTextarea,
  CInput,
  CInputFile,
  CInputCheckbox,
  CLabel,
  CSelect,
  CRow,
} from '@coreui/react'

import CIcon from '@coreui/icons-react'

import { DocsLink } from 'src/reusable'

const AddItem = () => {

  const [collapsed, setCollapsed] = React.useState(true)

  const [showElements, setShowElements] = React.useState(true)

const [name,setName] = React.useState("")

const [aaaa,setAaaa] = React.useState(false)

const [bbbb,setBbbb] = React.useState(false)


let disable2 = (e)=>{

setName(e.target.value);

if(e.target.value=== "true"){

    setAaaa(true)

    setBbbb(true)

}else{

  setAaaa(false)

  setBbbb(false)

}

}

  return (

    <>      
 
      <CRow>
        <CCol xs="12" md="6">
          <CCard>
            <CCardHeader>
              Add New Item {name}
            </CCardHeader>
            <CCardBody>
              <CForm action="" method="post" encType="multipart/form-data" className="form-horizontal">

              <CFormGroup row>
                      <CCol md="3">
                        <CLabel htmlFor="disabled-input">Item Serial Number</CLabel>
                    </CCol>
                    <CCol xs="12" md="9">
                        <CInput id="disabled-input" name="disabled-input" disabled={aaaa}/>
                    </CCol>
                </CFormGroup>

                  <CFormGroup row>
                  <CCol md="3"><CLabel></CLabel></CCol>
                  <CCol md="9" style={{marginTop:"-20px"}}>
                    <CFormGroup variant="checkbox" className="checkbox">
                      <CInputCheckbox 
                        id="checkbox1" 
                        name="checkbox1" 
                        onChange={e => disable2(e)} 
                        value="true"
                      />
                      <CLabel variant="checkbox" className="form-check-label" htmlFor="checkbox1">Auto Assigned</CLabel>
                    </CFormGroup>
                   </CCol>
                   </CFormGroup>

Vijayaraghavan Sundararaman · Accepted Answer · 2021-06-24 09:30:36Z

1

Please refer to the example below

import { useState } from "react";

export default function App() {
  const [checked, setChecked] = useState(false);
  const [text, setText] = useState("");
  return (
    <div className="App">
      <label>
        Checkbox:
        <input
          name="checkbox"
          type="checkbox"
          checked={checked}
          onChange={() => {
                if(checked){
                  setText('')
                }
            setChecked(!checked)
              }
           }
        />
      </label>
      <label>
      Input:
        <input
          name="input"
          type="text"
          disabled={!checked}
         value={text}
         onChange={e => setText(e.target.value)}
        />
      </label>
    </div>
  );
}

answered Jun 24, 2021 at 9:30

Vijayaraghavan Sundararaman

9321 gold badge8 silver badges14 bronze badges

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

Collectives™ on Stack Overflow

React js: How to disable text input based on a checkbox value?

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