How to unable and uncheck other checkbox if one is check using jquery?

Question

 <input type="checkbox" class="allCheck" />all
 <input type="checkbox" class="checks" />shoes
 <input type="checkbox" class="checks" />bag
 <input type="checkbox" class="checks" />car

how to unable and uncheck other checkbox if checkbox all is checked?

NOTE: I want to check multiple checkbox EXCEPT ALL if ALL is checked the others must be unchecked and disabled.

score 1 · Answer 1 · answered Aug 07 '16 at 18:17

It's fairly straight-forward, but there are gotchas:

If .allCheck is changed by the user, drive the .checks checkboxes from it
If a .checks checkbox is changed by the user, drive the .allCheck checkbox based on whether all or none of .checks are (now) checked

// If `.allCheck` is changed by the user, drive the `.checks` checkboxes from it
$(".allCheck").on("change", function() {
  $(".checks").prop("checked", this.checked);
});
// If a `.checks` checkbox is changed by the user, drive the `.allCheck`
// checkbox based on whether all or none of `.checks` are (now) checked
$(".checks").on("change", function() {
  var all = $(".checks").get().every(function(cb) {
    return cb.checked;
  });
  $(".allCheck").prop("checked", all);
});

<label><input type="checkbox" class="allCheck" />all</label>
<label><input type="checkbox" class="checks" />shoes</label>
<label><input type="checkbox" class="checks" />bag</label>
<label><input type="checkbox" class="checks" />car</label>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Note in the above I have not done this

...and disabled

We can, but it's not the way these things are usually most useful. Instead, the above makes it easy to pick all but one (by ticking "all," then unticking the one).

But if you really want that disabled behavior, granted it's a bit simpler: You flag disabled via .prop("disabled", flag) and only have to handle changes to .allCheck.

$(".allCheck").on("change", function() {
  $(".checks")
      .prop("checked", this.checked)
      .prop("disabled", this.checked)
});

<label><input type="checkbox" class="allCheck" />all</label>
<label><input type="checkbox" class="checks" />shoes</label>
<label><input type="checkbox" class="checks" />bag</label>
<label><input type="checkbox" class="checks" />car</label>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

jonju · Answer 2 · 2016-08-07T18:28:17.803

0

$('.allCheck').click(function(){  
    $('.checks').prop('checked',$(this).prop('checked'));
    $('.checks').prop('disabled',$(this).prop('checked'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="allCheck" />all
 <input type="checkbox" class="checks" />shoes
 <input type="checkbox" class="checks" />bag
 <input type="checkbox" class="checks" />car

edited Aug 07 '16 at 18:28

answered Aug 07 '16 at 18:22

jonju

2,711
1
13
19

How is this different from previous answer? Would you mind explaining it and what do you do? When you aren't explaining anything and just throwing a code, it means like *you* aren't genuinely answering it. – Praveen Kumar Purushothaman Aug 07 '16 at 18:29
1. I didn't see the last NOTE(that's why I changed it after seeing). 2. The answer wasn't there when I started writing my answer. You think this is hard huh!!. – jonju Aug 07 '16 at 18:30
BTW look at the difference between the two answers. – jonju Aug 07 '16 at 18:34
Whatever, where's an explanation? I didn't downvote. But I don't wanna upvote either, which has a code-only answer. This is not an example, where the context is perfectly known. – Praveen Kumar Purushothaman Aug 07 '16 at 18:58

How to unable and uncheck other checkbox if one is check using jquery?

2 Answers2