ansaurus

Question

Control third check box based on the state of the first two using jquery

Answer 1

+1 A:

Okay, so the id attribute can't begin with a number. Also, the <label> tag is a nice thing to add to make the text adjacent to a checkbox clickable.

Here's how I would change your HTML:

<label><input type="checkbox" class="chkGroup" id="chk1">First</label>
<label><input type="checkbox" class="chkGroup" id="chk2">Second</label>
<label><input type="checkbox" class="chkGroup" id="chk3">Third</label>

And here's the JavaScript code:

$('.chkGroup').bind('click', function(){
    if ($('#chk1:checked,#chk2:checked').length > 0) {
        $('#chk3').attr('disabled', 'disabled').removeAttr('checked');
        $('#chk3').parent('label').css({color: '#ccc'});
    } else {
        $('#chk3').removeAttr('disabled');
        $('#chk3').parent('label').css({color: '#000'});
    }
});

To check to see if something is checked, you can just use the :checked selector. I also added a css() call to make the label gray if the adjacent checkbox is disabled.

artlung 2010-06-13 00:57:27

Answer 2

A:

Thank you for your very quick reply. That is some concise code and the type of thing I'm after. I knew jquery could really simplify this and I'm making it more difficult. Too true about id not beginning with a number. Thanks for the reminder. I don't have the option to really add a label or edit the html as it's generated vi a CMS. I'm trying to keep it simple for now and just nail down the js on the side outside of the larger picture. I forgot to mention that the class is shared among other control on the page. Controls that I'm not interested in. Nice code! I took what you provided and made a couple of modifications and it works nicely.

Here's what I have:

$(":checkbox").click(function(){
    if ($('#chk1:checked,#chk2:checked').length > 0) {
        $('#chk3').attr('disabled', 'disabled').removeAttr('checked');
    } else {
        $('#chk3').removeAttr('disabled');
    }
});

Works like a charm in disabling #chk3 when either or both #chk1 and #chk2 are checked. Now I just need to disable #chk1 and #chk2 when #chk3 is enabled and checked. Would you mind adding that functionality?

Moj 2010-06-13 02:17:42

Go ahead and update your question, don't provide clarifications in an answer.

artlung 2010-06-13 02:43:08

ansaurus

tags:

views:

answers:

Control third check box based on the state of the first two using jquery

related questions