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>

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