CODEWITHSUNDEEP
jquerycheckbox
pshoeg
pshoeg

Reputation: 389

Uncheck checkboxes by checking other checkbox

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);
    });
});

Upvotes: 2

Views: 4350

Answers (5)

Andrea Scarcella
Andrea Scarcella

Reputation: 3333

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

Upvotes: 0

Johan
Johan

Reputation: 35213

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);
});

Upvotes: 0

Chamika Sandamal
Chamika Sandamal

Reputation: 24322

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/

Upvotes: 1

billyonecan
billyonecan

Reputation: 20270

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

Upvotes: 3

Instance Noodle
Instance Noodle

Reputation: 227

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);

        }
    });
});

Upvotes: 0

Related Questions