vendredi 27 novembre 2020

make a react js radio buttons that disable and enable another input (classes)

i have this react js 'contact-us' code, i made a 3 radio buttons but they does not work, i want to make the select input disabled until i click on an one specific radio button 'intrests in service', when i click it: the select input will be enable , else it still disabled. ps: i do not use functions, all in a class.

    <div className='row'>
                <div className='col-6'>
                  <h> Your Intrest : </h>
                  <div className='radio-btn'>
                  <label>
                  <input
                    type='radio'
                    name='service'
                    value={this.state.subject}
                    className={`for formInput ${formErrors.subject != 0 ? 'error' : null}`}
                    onChange={this.handleChange}
                    placeholder='Service'
                    noValidate
                  /> intrest in service. </label>
                  </div>
                  
                  <div className='radio-btn'>
                  <label>
                  <input
                    type='radio'
                    name='team'
                    value={this.state.subject}
                    className={`for formInput ${formErrors.subject != 0 ? 'error' : null}`}
                    onChange={this.handleChange}
                    placeholder='Team'
                    noValidate
                  /> Join to our team. </label>
                  </div>
    
                  <div className='radio-btn'>
                  <label>
                  <input
                    type='radio'
                    name='another'
                    value={this.state.subject}
                    className={`for formInput ${formErrors.subject != 0 ? 'error' : null}`}
                    onChange={this.handleChange}
                    placeholder='Another'
                    noValidate
                  /> Another help.</label>
                  </div>
    
                  {formErrors.subject == 0 && (
                    <span className='errorMessage'>{formErrors.subject}</span>
                  )}
                </div>
    
                <div className='col-6'>
                  <h> Select Service: </h>
                  <select
                    type='select'
                    name='service'
                    value={this.state.service}
                    className={`form-control formInput ${formErrors.service.length > 0 ? 'error' : null}`}
                    onChange={this.handleChange}
                    placeholder='Service'
                    noValidate
                    disabled
                  >
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                  </select>
                  {formErrors.service.length > 0 && (
                    <span className='errorMessage'>{formErrors.service}</span>
                  )}
                </div>



Aucun commentaire:

Enregistrer un commentaire