ansaurus

Question

jQuery Checkboxes

Answer 1

+4 A:

$(':checkbox').click(function () {
    $('li').toggleClass('disabled', !$(':checkbox:checked').length);
});

RaYell 2009-07-21 16:23:33

You should use $('#myform input[type=checkbox]:checked') if you only want the checkboxes in a form with id myform.

Time Machine 2009-07-21 16:24:35

I think you meant $("li") instead of $("*").

Philippe Leybaert 2009-07-21 16:24:48

Yes, I notices that typo and fixed it.

RaYell 2009-07-21 16:25:57

You can just use `if ($('input[type=checkbox]:checked').length)` rather than using the extra `count` variable.

Matt Sach 2009-07-21 16:25:59

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 2009-07-21 16:27:42

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 2009-07-21 16:29:42

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 2009-07-21 16:29:51

You should use the click event instead of the change event.

Philippe Leybaert 2009-07-21 16:29:54

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 2009-07-21 16:29:54

There is a shortcut for getting checkboxes instead of checking the type attribute:$(':checkbox:checked')

MacAnthony 2009-07-21 16:31:42

@Philippe Leybaert> it doesn't really matter if I use change or click event in this case

RaYell 2009-07-21 16:32:21

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 2009-07-21 16:33:43

@MacAnthony> thanks for pointing that out, updated my code

RaYell 2009-07-21 16:34:45

Ken, thanks for pointing out the toggleClass method, very cool. :)

SolutionYogi 2009-07-21 16:35:31

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 2009-07-21 16:37:29

change or click does make a big difference. Have you tried it in IE and Firefox?

Philippe Leybaert 2009-07-21 16:39:01

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 2009-07-21 17:33:38

Updated, thanks guys for tips.

RaYell 2009-07-21 17:45:50

Answer 2

A:

$(':checkbox')
    .click(
        function() 
        { 
            $('li').toggleClass('disabled', $(':checkbox :checked').length <= 0));
        }
     );

EDIT: Thanks Ken for pointing out toggleClass method.

SolutionYogi 2009-07-21 16:26:56

Answer 3

+1 A:

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

$('input[type=checkbox]').live('click', function () {
    if ($('input[type=checkbox]:checked').length)
    {
        $('li').addClass('disabled');
    }
    else
    {
        $('li').removeClass('disabled');
    }
});

Matt Sach 2009-07-21 16:29:41

"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 2009-07-21 16:33:48

Excellent point, and one I should have remembered from previous code. IE doesn't handle "change" on checkboxes, for starters.

Matt Sach 2009-07-21 17:07:22

Answer 4

A:

$(':checkbox') .click( function() { $('li').toggleClass('disabled', $(':checkbox :checked').length <= 0)); } );

Claudio 2010-10-28 15:46:10

ansaurus

tags:

views:

answers:

jQuery Checkboxes

related questions