Uncheck checkboxes by checking other checkbox

Question

So, I have six checkboxes, one of which is checked as default. The user is only allowed to check two checkboxes at a time, and this works fine. However, the if the default checkbox is checked, no other should be checked. This is what's giving me issues. I found this post and tried working from that.

So, I have 5 checkboxes with class other and one checkbox with id default. My problem is that I can't get it to check default when none of the others are checked.

Here's a JSFiddle with the code — can you guys push me in the right direction?

Here's my code:

HTML:

<input type="checkbox" group="checkboxes" name="other" class="other" id="one">
  <label for="one">One</label><br />
<input type="checkbox"  group="checkboxes" name="other" class="other" id="two">
  <label for="two">Two</label><br />
<input type="checkbox" group="checkboxes" name="other" class="other" id="three">
  <label for="three">Three</label><br />
<input type="checkbox" group="checkboxes" name="other" class="other" id="four">
  <label for="four">Four</label><br />
<input type="checkbox" group="checkboxes" name="other" class="other" id="five">
  <label for="five">Five</label><br />
<input group="checkboxes" type="checkbox" checked="checked" name="other" id="default">
  <label for="default">Default</label>

jQuery:

$('.other').change(function(){
    var c = this.checked ? false : true;
    $('#default').attr('checked', c);
});

$(document).ready(function(){
    var maxaids = "2";
    $(document).on('click', "input[type=checkbox]", function(){
        var bol = $("input:checked").length >= maxaids;
        $("input[type=checkbox]").not(":checked").attr("disabled",bol);
    });
});

+1 for the clear description and an interesting question indeed — Hanky Panky, Jun 27 '13 at 07:35
`this.checked ? false : true;` is a bit excessive. Also, unless you're using an old version of jQuery; use `prop()` instead of `attr()` — Johan, Jun 27 '13 at 07:44
Actually, default is a hidden checkbox, just didn't want to overcomplicate things :) So it's not possible to uncheck. — pshoeg, Jun 27 '13 at 08:39

billyonecan · Accepted Answer · 2013-06-27T07:52:24.340

3

You just need to check how many checkboxes with the class other are checked. If there aren't any, check the default checkbox:

$('#default').prop('checked', !$('.other').filter(':checked').length);

Here's a fiddle

edited Jun 27 '13 at 07:52

answered Jun 27 '13 at 07:47

billyonecan

20,090
8
42
64

Chamika Sandamal · Answer 2 · 2013-06-27T07:54:39.373

Try this,

$(document).ready(function () {
    var maxaids = "2";
    $(document).on('click', "input[type=checkbox]", function () {
        if (this.id == "default") {
            var bol = $(this).is(":checked");
            $("input[type=checkbox]").not(this).attr("disabled", bol).attr("checked", false);
        } else {
            var bol = $("input:checked").length >= maxaids;
            $("input[type=checkbox]").not(":checked").attr("disabled", bol);
        }
    });
});

http://jsfiddle.net/kLMcZ/2/

Update,

$(document).ready(function () {
    var maxaids = "2";
    $(document).on('click', "input[type=checkbox]", function () {
        if (this.id == "default") {
            var bol = $(this).is(":checked");
            $("input[type=checkbox]").not(this).attr("disabled", bol).attr("checked", false);
        } else {
            var bol = $("input:checked").length >= maxaids;
            $("input[type=checkbox]").not(":checked").attr("disabled", bol);
            if ($("input:checked").length == 0) {
                $("#default").click();
            }
        }
    });
});

See updated fiddle, http://jsfiddle.net/kLMcZ/16/

Default does not get checked when all others are unchecked – Hanky Panky Jun 27 '13 at 07:43 — Hanky Panky, Jun 27 '13 at 07:43

score 0 · Answer 3 · answered Jun 27 '13 at 07:48

use prop to check the checkbox

Demo

$('.other').change(function(){
    var c = this.checked ? false : true;
    $('#default').attr('checked', c);
});

$(document).ready(function(){
    var maxaids = "2";
    $(document).on('click', "input[type=checkbox]", function(){

        var checkcount = $("input:checked").length;
        var bol = checkcount >= maxaids;
        $("input[type=checkbox]").not(":checked").attr("disabled",bol);
        if(checkcount == 0){
            console.log(checkcount);
            $('#default').prop('checked', true);

        }
    });
});

score 0 · Answer 4 · answered Jun 27 '13 at 08:00

var maxaids = "2";
$(document).on('click', "input[type=checkbox]", function(){

    var bol = $("input:checked").length >= maxaids;

    $("input[type=checkbox]").not(":checked").attr("disabled",bol);

    var checkCount = $('input[type=checkbox]')
                         .not('#default')
                         .filter(function(i, el){
                             return el.checked;
                         }).length;

    $('#default').prop('checked', checkCount > 0);
});

score 0 · Answer 5 · answered Jun 27 '13 at 08:10

My 2 cents: (the rest of your answer remains unchanged and is therefore not explicitly reported here)

$('.other').change(function(event){
    var boll = $("input:checked").length === 0;
    var c = this.checked ? false : true;
    $('#default').attr('checked', c);
//just check how many are checked, after you have applied the rest of your logic 
    if(boll) {    
//best to use 'prop' here, attr doesn't do the trick
        $('#default').prop('checked', true);}
});

JSFiddle

Uncheck checkboxes by checking other checkbox

5 Answers5

Here's a fiddle