How to disable the input field while clicking on checkbox using reactjs

Question

I have input text-field and Checkbox, when we click on Checkbox the text-field should get disabled. But I couldn't do that, couldn't able to figure out where i'm going wrong.

I have tried in this way:

<FormControlLabel
                                        control={
                                            <Checkbox
                                                // checked={this.state.games=== -1 ? true : false}
                                                onChange={this.handleTextField}
                                                name="games" color="primary"
                                            />}
                                        label="all"
                                    />
                                }

 <TextField required type="number" name='games' variant="outlined"
                                        disabled={this.state.games === -1 ? true : false}
                                        placeholder="value"
                                        onChange={this.handleTextField}
                                    />

OnChange method:

handleTextField = (e) => {

 this.setState({games: e.target.checked === true ? -1 : 0 || e.target.value})
}

Still textfield is not getting disabled. Can anyone help me with this query?

user10454516 · Accepted Answer · 2020-09-10 07:05:38Z

1

this.state = {
  games: 0,
}

handleTextField = (e) => {
  this.setState({ textValue: e.target.value })
}

toggleCheckbox = () => this.setState({ games: this.state.games === 0 ? -1 : 0 });

<FormControlLabel
  control={
    <Checkbox
      checked={this.state.games === -1}
      onChange={this.toggleCheckbox}
      name="games"
      color="primary"
    />}
  label="all"
/>

<TextField required type="number" name='games' variant="outlined"
  disabled={this.state.games === -1}
  placeholder="value"
  onChange={this.handleTextField}
/>

I propose different idea, if you don't mind. Use one flag,isCheckboxChecked. Apply it on input checkbox and textfield.

Update:

I update the answer to rely based on games value

edited Sep 10, 2020 at 7:05

answered Sep 10, 2020 at 6:35

user10454516

1,1534 gold badges23 silver badges38 bronze badges

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

6 Comments

Sanjana Over a year ago

Hi, When we click on checkbox i have to get variable games value as -1. That is why i have given onChange method for both checkbox and textfield

user10454516 Over a year ago

When click on checkbox (it could be check or uncheck) or when the chechbox is checked the games state should be -1?

Sanjana Over a year ago

When we click on checkbox, it should be checked and value should be -1 and textfield will get disable

Sanjana Over a year ago

The thing is we'll be using one variable for both checkbox and text-field

user10454516 Over a year ago

@Sanjana if it is answer your question, please accept it as accepted answer

|

Milind Anantwar · Accepted Answer · 2020-09-10 06:25:39Z

0

You need to use .setState to update the state value here:

handleTextField = (e) => {
 this.setState({
   games: e.target.checked === true ? -1 : 0 || e.target.value
});}

answered Sep 10, 2020 at 6:25

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

6 Comments

Sanjana Over a year ago

Yes, i've done that but still textfield is not getting disabled

Milind Anantwar Over a year ago

@Sanjana: Can you try console.log(event.target.) too see target context?

Sanjana Over a year ago

data-indeterminate="false" getting the input tag in console

Milind Anantwar Over a year ago

Is it input type checkbox?

Sanjana Over a year ago

The same way i declared above in my query.

|

Collectives™ on Stack Overflow

How to disable the input field while clicking on checkbox using reactjs

2 Answers 2

6 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related