Check if at least one checkbox is checked to enable a link-CodePudding

I have a form with multi step, and i have a problem on one step, i want to block users to be able to progress in the form if they didn't check at least one checkbox

The problem is, if i check anything, the CTA is clickable, but if i uncheck my checkbox, i still can click on the CTA and progress in the form

$('input[name="PROBLEM"]').on('change',function(){
                 $(".four").removeClass('isDisabled', this.checked);
             });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div >
   <div id="row1">
       <span >
           <input name="PROBLEM" type="checkbox" id="crash" value="crash">
           <label for="crash">Crash/bugs</label>
       </span>
      <span >
          <input name="PROBLEM" type="checkbox" id="transfer" value="transfer">
          <label for="transfer">Transfer</label>
       </span>
   </div>
</div>
<div >
    <a href="#partfour" ></a>
</div>

I tried with length > 0 but somehow didn't succeed (probably because i'm still a beginner with JS)

Any idea on how i can fix that ? Thank you in advance

CodePudding user response：

Tell toggleClass to only add isDisabled class if length of checked checkbox is 0.

$(selector).toggleClass(classname,function(index,currentclass),switch)

switch Optional. A Boolean value specifying if the class should only be added (true), or only be removed (false)

$('input[name="PROBLEM"]').on('change',function(){
   const checkedBox = $("input[name='PROBLEM']:checked").length
   $(".four").toggleClass('isDisabled', checkedBox === 0);
});

.isDisabled {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div >
   <div id="row1">
       <span >
           <input name="PROBLEM" type="checkbox" id="crash" value="crash">
           <label for="crash">Crash/bugs</label>
       </span>
      <span >
          <input name="PROBLEM" type="checkbox" id="transfer" value="transfer">
          <label for="transfer">Transfer</label>
       </span>
   </div>
</div>
<div >
    <a href="#partfour" >CTA</a>
</div>