11

I'm trying to write a piece of jQuery code where, if all checkboxes are "unchecked", then all li tags have the class "disabled."

But, if one checkbox (any checkbox) is checked, then all [li] tags lose the class "disabled".

Many thanks!

4 Answers4

15
$(':checkbox').click(function () {
    $('li').toggleClass('disabled', !$(':checkbox:checked').length);
});
RaYell
  • 69,610
  • 20
  • 126
  • 152
  • You should use $('#myform input[type=checkbox]:checked') if you only want the checkboxes in a form with id myform. –  Jul 21 '09 at 16:24
  • I think you meant $("li") instead of $("*"). – Philippe Leybaert Jul 21 '09 at 16:24
  • Yes, I notices that typo and fixed it. – RaYell Jul 21 '09 at 16:25
  • You can just use `if ($('input[type=checkbox]:checked').length)` rather than using the extra `count` variable. – Matt Sach Jul 21 '09 at 16:25
  • I believe that you will also want to change your else if (count === 1) to else if (count >= 1). Otherwise, if more than one box is checked this will fail. Otherwise, very nice. – Sean Vieira Jul 21 '09 at 16:27
  • Read the problem description. It says if one checkbox is selected then it should remove the class not if at least one. Also I'm using the `count` variable to make the script faster. – RaYell Jul 21 '09 at 16:29
  • Aberon, user hasn't clarified whether he wants to remove the class if at least one checkbox is checked or EXACTLY one checkbox is checked. – SolutionYogi Jul 21 '09 at 16:29
  • You should use the click event instead of the change event. – Philippe Leybaert Jul 21 '09 at 16:29
  • 2
    You can replace the branch with a call to toggleClass instead of two different calls (one to addClass and one to removeClass): $('li').toggleClass('disabled', (count===0)); – Ken Browning Jul 21 '09 at 16:29
  • 1
    There is a shortcut for getting checkboxes instead of checking the type attribute: $(':checkbox:checked') – MacAnthony Jul 21 '09 at 16:31
  • @Philippe Leybaert> it doesn't really matter if I use change or click event in this case – RaYell Jul 21 '09 at 16:32
  • Ken Browning>I could replace that if we would remove class if at least one is selected. If we have a case either exactly 1 or none is selected then I'm afraid it cannot be shorten. – RaYell Jul 21 '09 at 16:33
  • Ken, thanks for pointing out the toggleClass method, very cool. :) – SolutionYogi Jul 21 '09 at 16:35
  • I've just updated the code. It now covers both cases (remove class if exactly one checkbox is checked and remove it if at least one is checked) – RaYell Jul 21 '09 at 16:37
  • change or click does make a big difference. Have you tried it in IE and Firefox? – Philippe Leybaert Jul 21 '09 at 16:39
  • Yes, 'change' is broken in IE, 'click' would be preferable. Also, you should edit/remove the first code snipped as it removes the class only when exactly one checkbox is clicked and user clarified that he wants to remove the class if at least one checkbox is clicked. – SolutionYogi Jul 21 '09 at 17:33
  • The top answer [here](http://stackoverflow.com/questions/8423217/jquery-checkbox-checked-state-changed-event) is much cleaner and intuitive than all this `is(':checked')` business. :) – Chiramisu Mar 05 '12 at 19:11
  • @Chiramisu: doesn't quite work, as the handler needs to examine ALL checkboxes, not just the one clicked. – Matt Sach Jun 25 '12 at 16:21
8

I came across this post by accident and I thought I would add my shilling worth:

jQuery(':checkbox').click(function()
{
    if (jQuery(this).is(':checked'))
    {
        alert("Checked");
    }
    else
    {
        alert("Unchecked");
    }
});
Graham Clark
  • 12,886
  • 8
  • 50
  • 82
Garytxo
  • 346
  • 1
  • 4
  • 11
  • This doesn't apply a class, or examine all other checkboxes, so doesn't really solve the OP's problem. Adding a click handler to checkboxes and then seeing if the clicked item is checked is kinda the easy part :( – Matt Sach Aug 29 '12 at 09:09
5

Slight modification of RaYell's, which will include any dynamically added checkboxes:

$(':checkbox').live('click', function () {
    $('li').toggleClass('disabled', !$(':checkbox:checked').length);
});
Matt Sach
  • 1,162
  • 16
  • 37
  • 6
    "change" is not a good event to capture for checkboxes. You should always use "click" (which is also fired when a checkbox is selected using the keyboard). – Philippe Leybaert Jul 21 '09 at 16:33
  • Excellent point, and one I should have remembered from previous code. IE doesn't handle "change" on checkboxes, for starters. – Matt Sach Jul 21 '09 at 17:07
1
$(':checkbox')
    .click(
        function() 
        { 
            $('li').toggleClass('disabled', $(':checkbox :checked').length <= 0));
        }
     );

EDIT: Thanks Ken for pointing out toggleClass method.

SolutionYogi
  • 31,807
  • 12
  • 70
  • 78