CODEWITHSUNDEEP
javascriptjqueryhtmlcheckboxchecked
uzhas
uzhas

Reputation: 925

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?

Upvotes: 6

Views: 2292

Answers (3)

phk
phk

Reputation: 2061

You could also prevent unchecking of the last checked checkbox by disabling it as long as it is the sole checked one.

$('#demo').on('change', '.preventUncheck', function () {
    var $checkedEls = $('#demo .preventUncheck:checked');
    $checkedEls.prop('disabled', $checkedEls.length === 1);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="demo">
<p>
  <input type="checkbox" class="preventUncheck" id="toggle-on1" checked>
  <label for="toggle-on1">Sell</label>
</p>
<p>
  <input type="checkbox" class="preventUncheck" id="toggle-on2">
  <label for="toggle-on2">Rent</label> 
</p>
<p>
  <input type="checkbox" class="preventUncheck" id="toggle-on3" checked>
  <label for="toggle-on3">Lease</label> 
</p>
<p>
  <input type="checkbox" class="preventUncheck" id="toggle-on4">
  <label for="toggle-on4">Lend</label> 
</p>
</div>

(While at it, I also changed it so that only a single event handler is registered.)

Upvotes: 0

Mohammad
Mohammad

Reputation: 21489

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>

Upvotes: 7

Juan Ignacio Cornet
Juan Ignacio Cornet

Reputation: 239

Add attr "disabled" to the checkbox?

Upvotes: 0

Related Questions