Conditionally disabled React Checkboxes

Question

I am building out a listing of checkboxes and only want the user to be able to select 2 checkboxes and then it will disable the checkboxes. I have a disabled prop which I can pass a boolean but having trouble with the logic to disable the checkbox.

<UISelectableButton
    key={i}
    block={true}
    value={workflow}
    disabled={selectedRevisions > 1 && true}
    onSelectedChange={this.onSelectedChange}
    onClick={() => this.handleRevisions(workflow)}
    type="checkbox"
/>

For the onSelectedChange I have a function that will hold the index of how many checkboxes are currently selected. I can easily disable the buttons with a ternary operator by doing selectedRevisions > 2 then anytime there are more than 2 items selected then I disable the buttons. The problem with this is that will disable all the buttons and I don't want to disable any buttons that have been selected. Is there a way to check if the checkbox has been selected and still pass disabled a boolean and not a function.

PO title is wrong

RIYAJ KHAN
– RIYAJ KHAN

2018-08-07 01:56:42 +00:00
Commented Aug 7, 2018 at 1:56 — RIYAJ KHAN
– RIYAJ KHAN, Commented Aug 7, 2018 at 1:56
What are you disabling? Checkboxes or buttons?

Leo
– Leo

2018-08-07 02:00:57 +00:00
Commented Aug 7, 2018 at 2:00 — Leo
– Leo, Commented Aug 7, 2018 at 2:00

Tholle · Accepted Answer · 2018-08-07 02:02:22Z

You could keep an object in state that keep track of the checkbox values, and in your render method you can check if there are 2 or more checkboxes that are checked and use this to disable the others.

Example

class App extends React.Component {
  state = { checked: {} };

  onSelectedChange = index => {
    this.setState(previousState => ({
      checked: {
        ...previousState.checked,
        [index]: !previousState.checked[index]
      }
    }));
  };

  render() {
    const { checked } = this.state;
    const checkedCount = Object.keys(checked).filter(key => checked[key]).length;
    const disabled = checkedCount > 1;

    return (
      <div>
        {Array.from({ length: 5 }, (_element, index) => (
          <input
            key={index}
            onChange={() => this.onSelectedChange(index)}
            type="checkbox"
            checked={checked[index] || false}
            disabled={!checked[index] && disabled}
          />
        ))}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

marquitobb · Accepted Answer · 2020-09-22 15:26:20Z

1

with bootstrap it's only this

                <input
                    type="checkbox"
                    className="form-check-input"
                    id="exampleCheck1"
                    disabled={true}
                />

answered Sep 22, 2020 at 15:26

marquitobb

4385 silver badges7 bronze badges

2 Comments

Abhijith Sasikumar Over a year ago

Lol. This would be the worst answer for this question.

alexander ikeh Over a year ago

lol. You probably didn't ven understand the question

Gouranga Satapathy · Accepted Answer · 2023-05-14 15:26:52Z

you can initiate a counter variable and track & when chckebox is checked more then 2 times then add a condition at disabled on it

like i am adding based on if one checkbox is checked below

const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const { name, checked } = event.target;
setCheckedState({
  ...checkedState,
  [name]: checked,
});

checked ? setCheckedItem(name) : setCheckedItem("");};

<div className="flex gap-4 pt-4">
            {catagory.map((eachSource) => (
              <label key={eachSource}>
                <input
                  type="checkbox"
                  name={eachSource}
                  checked={checkedState[eachSource] || false}
                  disabled={
                    (eachSource != checkedItem && checkedItem != "") ||
                    false
                  }
                  onChange={handleChange}
                />
                {eachSource}
              </label>
            ))}
          </div>

Collectives™ on Stack Overflow

Conditionally disabled React Checkboxes

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related