javascriptjqueryhtmlcheckboxchecked

How to prevent unchecking all checkboxes using jquery?


I have custom checkboxes:

<p>
    <input class="preventUncheck" id="toggle-on1" type="checkbox">
    <label for="toggle-on1">Selling</label>
</p>
<p>
    <input class="preventUncheck" id="toggle-on2" type="checkbox">           
    <label for="toggle-on2">Rent</label> 
</p>
$(function() {
    //prevent to uncheck all checkboxes
    $('.preventUncheck').on('change', function() {
        $('.preventUncheck').length == 0
        && !this.checked
        && $(this).prop('checked', true);
    });
});

I want to prevent unchecking all checkbox, that means alway one checkbox should be checked and if user try to unchecking it, javascript prevent to do it.

How can i do this work?


Solution

  • You should check if length of checked checkbox is equal to 0 then prevent to unchecking it.

    $('.preventUncheck').on('change', function(e) {
        if ($('.preventUncheck:checked').length == 0 && !this.checked)
        	this.checked = true;
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <p>
      <input type="checkbox" class="preventUncheck" id="toggle-on1">
      <label for="toggle-on1">Selling</label>
    </p>
    <p>
      <input type="checkbox" class="preventUncheck" id="toggle-on2">
      <label for="toggle-on2">Rent</label> 
    </p>