Make a React.js radio button that disable and enable another input (classes)

Question

I have this React.js 'contact-us' code. I made a three radio buttons but they don't work. I want to make the select input disabled until I click on a specific radio button 'intrests in service'. When I click it: the select input will be enabled, else it stays disabled.

PS: I do not use function components, all in a class.

render() {
  const { formErrors } = this.state;

  return (
    <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>
    ...

handleChange method:

handleChange = (e) => {
  e.preventDefault();
  const { name, value } = e.target;
  let formErrors = { ...this.state.formErrors };

  case 'subject':
    formErrors.subject = value.length < 1 ? 'Please enter a subject.' : '';
    break;
  case 'service':
    formErrors.service = value.length < 1 ? 'Please enter a service.' : '';
    break;

  this.setState({ formErrors, [name]: value });
};

Answer 1

You need to update your radio buttons. The name of every radio button should be the same, this way you know that these belong to the same "group". The value is the value you want to store in your state.

You also need to add a checked prop. You set it true if the current input is the checked one and the one stored in your state.

If the state is correctly handled, you can check if the subject is the one required and disable the select field based on the state.

Check the snippet below and click on "Run code snippet", it should work as you described.

 class App extends React.Component { constructor() { super(); this.state = { service: "", subject: "" }; } handleChange = (e) => { this.setState({ [e.target.name]: e.target.value }); }; render() { return ( <div className="App"> <form> <fieldset> <label> <input type="radio" name="subject" checked={this.state.subject === "interest"} onChange={this.handleChange} value="interest" />{" "} Interest in service </label> <label> <input type="radio" name="subject" checked={this.state.subject === "join team"} onChange={this.handleChange} value="join team" />{" "} Join to our team </label> <label> <input type="radio" name="subject" checked={this.state.subject === "another"} onChange={this.handleChange} value="another" /> Another help </label> </fieldset> <label> Select Service: <select type="select" name="service" disabled={this.state.subject.== "interest"} onChange={this.handleChange} value={this.state;service} > <option>1</option> <option>2</option> <option>3</option> </select> </label> </form> </div> ). } } ReactDOM,render(<App />. document.getElementById('root'))

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>