Disable and Deselect Checkboxes by name in React

Question

I have multiple checkboxes, But the condition is to disable the checkbox on specific name check. I have achieved that, but the problem is when you check on other checkboxes first and then check on the checkbox which you want to disable, the checkbox check is still present. I have published the code on stackblitz if you want to take a look. So on the below code, i want to disable all checkbox on click of "All ages". But when you select other checkbox and then select "All ages" checkbox the checked is still present and you can deselect that checkbox. How can i remove that checkbox checked after disabling.

// Example stateless functional component


// Example class component
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      checkedItems: {}
    };
  }
  handleChange = (event, formKey) => {
    const { name, checked } = event.target;
    const updatedCheckedItems = { ...this.state.checkedItems, [name]: checked };
    this.setState(
      {
        checkedItems: updatedCheckedItems
      },
      () => console.log(this.state.checkedItems)
    );
  };
  
  render = () => {
    const checkedValues = { ...this.state.checkedItems };
    const checkboxes = [
      {
        name: "3-5",
        key: "1",
        label: "3-5"
      },
      {
        name: "6-7",
        key: "2",
        label: "6-7"
      },
      {
        name: "8-10",
        key: "3",
        label: "8-10"
      },
      {
        name: "11-13",
        key: "4",
        label: "11-13"
      },
      {
        name: "14-18",
        key: "5",
        label: "14-18"
      },
      {
        name: "18+",
        key: "6",
        label: "18+"
      },
      {
        name: "All ages",
        key: "7",
        label: "All ages"
      }
    ];
    
    return (
      <div className="App">
        <h1>App Component</h1>
        {checkboxes.map(item => (
          <label key={item.name}>
            <input
              type="checkbox"
              name={item.name}
              checked={this.state.checkedItems[item.name] || false}
              onChange={this.handleChange}
              disabled={!checkedValues[item.name] && checkedValues["All ages"]}
            />
            {item.name}
          </label>
        ))}
      </div>
    )
  }
}

// Render it
ReactDOM.render(
  <App />,
  document.getElementById("react")
);

<div id="react"></div>
<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>

StackBlitz

Answer 1

Put this to clear all other selected when you choose the last. Hopefully I understand you correctly.

StackBlitz

if (name === 'All ages') this.state.checkboxes.filter((option) => option.name !== name).forEach((option) => {
      console.log(option);
      updatedCheckedItems[option.name] = false;
    });

Answer 2

In your handleChange function, you should change like below:

  handleChange = (event, formKey) => {
    const { name, checked } = event.target;
    // Changed line
    const updatedCheckedItems = name === 'All ages' ? { [name]: checked } : { ...this.state.checkedItems, [name]: checked };
    this.setState(
      {
        checkedItems: updatedCheckedItems
      },
      () => console.log(this.state.checkedItems)
    );
  };

If the checkbox name is All ages you should remove all the others, if not, just add one more property on the state object as usual.