Can't click on checkbox after setting its value

Question

I am not able to check/uncheck my checkbox after setting its value.

I've tried using both onClick and onChange but neither work. Not sure what else to try. I also bound it in the constructor.

<section id="publish-section-5">
  <div class="Grid">
    <div class="Col Col--6">
      <div class="grid-block">
        <div class="Form-group publish-insights-input">
          <div class="Form-checkbox is-restricted">                        
              <input
              id="isRestricted"
              name="checkboxDefault"
              type="checkbox"
              checked={this.state.insightsDTO['isRestricted'] == 'Y'}
              onClick={this.handleCheckbox}
            />  
            <label for="restricted">Is Restricted</label>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

handleCheckbox(e) {
  this.setState({
    insightsDTO: {
      ...this.state.insightsDTO, 
      [e.target.id]: e.target.checked
    }
  })
}

I just want to be able to click/unclick it, even after the value gets set.

You're comparing the state to 'Y', but setting it to checked, which will be true or false. — ray
– ray, Commented Sep 9, 2019 at 4:26

Derek Jin · Accepted Answer · 2019-09-09 04:23:01Z

1

ANSWER:

import React from 'react';

class Hello extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      insightsDTO: {
        checkboxDefault: true,
      },
    }
  }

  handleCheckbox = (e) => {
    this.setState({
      insightsDTO: {
        ...this.state.insightsDTO,
        [e.target.name]: !this.state.insightsDTO[e.target.name],
      },
    })
  }

  render() {
    return (
      <section id="publish-section-5">
        <div class="Grid">
          <div class="Col Col--6">
            <div class="grid-block">
              <div class="Form-group publish-insights-input">
                <div class="Form-checkbox is-restricted">                        
                    <input
                    id="isRestricted"
                    name="checkboxDefault"
                    type="checkbox"
                    checked={this.state.insightsDTO.checkboxDefault}
                    onChange={this.handleCheckbox}
                  />  
                  <label for="restricted">Is Restricted</label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    )
  }
};

export default Hello;

answered Sep 9, 2019 at 4:23

Derek Jin

6722 gold badges12 silver badges30 bronze badges

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

2 Comments

Praneeth Paruchuri Over a year ago

I didn;t check the complete code. I stand corrected.

Derek Jin Over a year ago

@Annah you can use either id or name but using name is more conventional.

ray · Accepted Answer · 2019-09-09 04:28:45Z

0

You're setting 'isRestricted' to true or false:

// isRestricted: true
[e.target.id]: e.target.checked

But then testing it against 'Y':

// always false, because the value is never 'Y'
checked={this.state.insightsDTO['isRestricted'] == 'Y'}

Try changing it to:

checked={this.state.insightsDTO['isRestricted']}

answered Sep 9, 2019 at 4:28

ray

27.3k5 gold badges31 silver badges30 bronze badges

Collectives™ on Stack Overflow

Can't click on checkbox after setting its value

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related