Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

126
Views
why the antd checkbox checked did not changed by the checked value

I am using antd checkbox group, now I want only one checkbox check in the same time, this is my code looks like:

<Checkbox.Group onChange={onChange} >
                  <Row>
                    <Col>
                      <Checkbox key={selected.length > 0?selected[0]+"1":1} value="内容不合规" checked={isDisabled("内容不合规")}>
                        内容不合规
                      </Checkbox>
                      <Checkbox key={selected.length > 0?selected[0]+"2":2} value="内容无法验证" checked={isDisabled("内容无法验证")}>
                      内容无法验证
                      </Checkbox>
                      <Checkbox key={selected.length > 0?selected[0]+"3":3} value="图片不清晰" checked={isDisabled("图片不清晰")}>
                      图片不清晰
                      </Checkbox>
                      <Checkbox key={selected.length > 0?selected[0]+"4":4} value="请联系客服" checked={isDisabled("请联系客服")}>
                      请联系客服
                      </Checkbox>
                    </Col>
                  </Row>
                </Checkbox.Group>

in the onChange function, I change the checked value in the state like this:

 function onChange(checkedValues) {
    if(checkedValues.length === 1){
      onCheckedChange(checkedValues);
    }
    if(checkedValues.length > 1){
      let newest = checkedValues[checkedValues.length - 1]
      let newArray = new Array();
      newArray.push(newest);
      onCheckedChange(newArray)
    }
  }

this function set the newest check value into the state checked field, when the user change the checkbox, the state changed and the UI rerender. then I control the checkbox checked or not using this function:

function isDisabled(id) {
    let disabled = selected.length > 0 && selected.indexOf(id) === -1;
    return !disabled;
  };

this function isDisabled check the current checked value in the state and make only the state stored value checked and other checkbox unchecked, I tracing the code and found the isDisabled successfully return the checked flag but the check group UI still not change. why did this happen? what should I do to make the checkbox change and only select one? I read some article and tell that only the checkbox key changed, the checkbox refresh, then I add this:

key={selected.length > 0?selected[0]+"1":1}

still did not work.

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!