If only one is checked then disable it in checked condition

Please check my code below where I have multiple checkbox and controlling them via single handle checkboxHandler .
I want that while unchecking any checkbox if one checked input remained left then it will be turn to disable so that any how one checkbox will remain always checked.

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

    this.state = {
      sliderVal: 10,
      isUpperCase: true,
      isLowercase: true,
      isNumbers: true,
      isSymbol: true,
      isLastChecked: false
    }

    this.sliderHandle = this.sliderHandle.bind(this);
    this.checkboxHandler = this.checkboxHandler.bind(this);
  }

  sliderHandle(event){
    this.setState({
      sliderVal: event.target.value
    });

    let v = Math.random() * (32 - 4) + 4;
    console.log(v);
  }

  checkCount = (isUpperCase,isLowercase,isNumbers,isSymbol) =>{
    const allCheck = [isUpperCase,isLowercase,isNumbers,isSymbol];

    console.log(allCheck.filter(t=>t));
  }


  checkboxHandler(e){
    const name = e.target.name;

    this.setState({
      [name]: e.target.checked, 
    })


    

  }













  render(){
    this.checkCount(this.state.isUpperCase,this.state.isLowercase,this.state.isNumbers,this.state.isSymbol);
    return(



<div className="container">
  <h2 className="title">Password Generator</h2>
  <div className="result">
    <div className="result__title field-title">Generated Password</div>
    <div className="result__info right">click to copy</div>
    <div className="result__info left">copied</div>
    <div className="result__viewbox" id="result">CLICK GENERATE</div>
    <button id="copy-btn"><i className="far fa-copy"></i></button>
  </div>
  <div className="length range__slider" data-min="4" data-max="32">
    <div className="length__title field-title" data-length={this.state.sliderVal}>length: </div>
    <input id="slider" type="range" min="4" max="32" value={this.state.sliderVal} onChange={this.sliderHandle} />
  </div>

  <div className="settings">
    <span className="settings__title field-title">settings</span>
    <div className="setting">
      <input
      type="checkbox"
      id="uppercase"
      name="isUpperCase"
      //disabled="true"
      checked={this.state.isUpperCase}
      onChange={this.checkboxHandler}
      />
      <label htmlFor="uppercase">Include Uppercase</label>
    </div>
    <div className="setting">
      <input type="checkbox"
      id="lowercase"
      name="isLowercase"
      checked={this.state.isLowercase}
      onChange={this.checkboxHandler}
      />
      <label htmlFor="lowercase">Include Lowercase</label>
    </div>
    <div className="setting">
      <input
      type="checkbox"
      id="number"
      name="isNumbers"
      checked={this.state.isNumbers}
      onChange={this.checkboxHandler}
       />
      <label htmlFor="number">Include Numbers</label>
    </div>
    <div className="setting">
      <input
      type="checkbox"
      id="symbol"
      name="isSymbol"
      checked={this.state.isSymbol}
      onChange={this.checkboxHandler}
      />
      <label htmlFor="symbol">Include Symbols</label>
    </div>
  </div>

  <button className="btn generate" id="generate">Generate Password</button>
</div>


    );
  }
}

export default App;

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.