How to not allow 1 checkbox to be checked at last

Question

I am fetching check-boxes values from database via ajax, In which every user should have one or more than one check-boxes. From which user should check all check-boxes except one remaining at last. I mean one check box should remain unchecked.

<div class="checkboxes">
<div class="selection">
<label><input type="checkbox" value="5" data-toggle="checkbox"> checkbox 1</label>
</div><br/>
<div class="selection">
<label><input type="checkbox" value="10" data-toggle="checkbox"> checkbox 2</label>
</div><br/>
<div class="selection">
<label><input type="checkbox" value="15" data-toggle="checkbox">checkbox 3</label>
</div>

</div>

Answer 1

hope this helps

 function checkMe() { var selected = []; $('.selection input:checked').each(function() { selected.push($(this).attr('value')); }); if (selected.length >= ($('.selection input').length)) { return false } } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <div class="checkboxes"> <div class="selection"> <label><input type="checkbox" value="5" onclick="return checkMe()" data-toggle="checkbox"> checkbox 1</label> </div><br/> <div class="selection"> <label><input type="checkbox" value="10" onclick="return checkMe()" data-toggle="checkbox"> checkbox 2</label> </div><br/> <div class="selection"> <label><input type="checkbox" value="15" onclick="return checkMe()" data-toggle="checkbox">checkbox 3</label> </div> </div> 

Answer 2

You can use: $( "input[type=checkbox]" ).prop("checked", true); to select all input checkbox.

and: $( "input[type=checkbox]" ).last().prop("checked", false); to uncheck the last one.

 $( "input[type=checkbox]" ).prop("checked", true); $( "input[type=checkbox]" ).last().prop("checked", false); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="checkboxes"> <div class="selection"> <label><input type="checkbox" value="5" data-toggle="checkbox"> checkbox 1</label> </div><br/> <div class="selection"> <label><input type="checkbox" value="10" data-toggle="checkbox"> checkbox 2</label> </div><br/> <div class="selection"> <label><input type="checkbox" value="15" data-toggle="checkbox">checkbox 3</label> </div> </div> 

Update

As OP clarify:

You can simply use:

let checkboxcountlimit= $('input:checkbox').length-1;
$('input[type=checkbox]').click(function() {
  let checkboxchecked= $('input:checkbox:checked').length;
  if ($(this).is(':checked')) {
    if (checkboxchecked > checkboxcountlimit){
      //if($(this).is($( "input[type=checkbox]" ).last())){
        $( "input[type=checkbox]" ).last().prop("checked", false);
      //}
    }
  }
});

to uncheck when the last checkbox was checked. And when the total checked checkbox count is more than the total checkbox minus one. Note that you can uncomment if you want the last checkbox to be unchecked only when that last checkbox is checked.

 let checkboxcountlimit= $('input:checkbox').length-1; $('input[type=checkbox]').click(function() { let checkboxchecked= $('input:checkbox:checked').length; if ($(this).is(':checked')) { if (checkboxchecked > checkboxcountlimit){ //if($(this).is($( "input[type=checkbox]" ).last())){ $( "input[type=checkbox]" ).last().prop("checked", false); //} } } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="checkboxes"> <div class="selection"> <label><input type="checkbox" value="5" data-toggle="checkbox"> checkbox 1</label> </div><br/> <div class="selection"> <label><input type="checkbox" value="10" data-toggle="checkbox"> checkbox 2</label> </div><br/> <div class="selection"> <label><input type="checkbox" value="15" data-toggle="checkbox">checkbox 3</label> </div> </div> 

if you want to make it the current checkbox tick to be unchecked if exceed minus one count.

You can use:

 let checkboxcountlimit= $('input:checkbox').length-1; $('input[type=checkbox]').click(function() { let checkboxchecked= $('input:checkbox:checked').length; if ($(this).is(':checked')) { if (checkboxchecked > checkboxcountlimit){ $(this).prop("checked", false); } } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="checkboxes"> <div class="selection"> <label><input type="checkbox" value="5" data-toggle="checkbox"> checkbox 1</label> </div><br/> <div class="selection"> <label><input type="checkbox" value="10" data-toggle="checkbox"> checkbox 2</label> </div><br/> <div class="selection"> <label><input type="checkbox" value="15" data-toggle="checkbox">checkbox 3</label> </div> </div>