jQuery remove class on uncheck of checkbox

Question

I have the jQuery function below that adds some classes to elements when a checkbox is checked which is all good. But if the checkbox is then unchecked, I want to then remove these same classes from the elements. I'm guessing it would be with .removeClass but I can't figure out where to add it.
Thanks

function countDouble() {      
    var d = $("input.double:checked").length;
    var s = $("input.single:checked").length;

    if (d === 2) {
   $(".twoday input:disabled").addClass("disabled");
       $(".twoday input:disabled + label").addClass("disabled");
    };
    if (s === 1) {
   $(".oneday input:disabled").addClass("disabled");
       $(".oneday input:disabled + label").addClass("disabled");
    };
};

jQuery(document).ready(function(){              
    countDouble();
    $(":checkbox").click(countDouble);  
});

Can you have the html posted? – Anujith Jan 24 '13 at 06:02 — Anujith, Jan 24 '13 at 06:02

score 0 · Answer 1 · edited May 23 '17 at 11:49

0

"disabled" is not so much a class as it is an attribute.

Explained here: jQuery - checkbox enable/disable

Good luck!

edited May 23 '17 at 11:49

Community

1
1

answered Jan 24 '13 at 05:57

Brandt Solovij

2,124
13
24

Thanks for the response. I am adding the class 'disabled' to the disabled checkboxes. They all become disabled when one is checked. But what I am stuck on is then removing that class if the checkbox is unchecked (and they all become enabled again) – user537137 Jan 24 '13 at 06:03

score 0 · Answer 2 · edited May 23 '17 at 12:12

0

See the below code:

$('#myform :checkbox').click(function() {
    var $this = $(this);
    // $this will contain a reference to the checkbox   
    if ($this.is(':checked')) {
        // the checkbox was checked, call the function to addClass 
    } else {
        // the checkbox was unchecked, call the function to removeClass
    }
});

Update: Clarifying on .click vs .change, here's an answer that explains it:

The checkbox just happens to be the special case where change and click are interchangable, because you can't fire the change event without also triggering click.

Source

edited May 23 '17 at 12:12

Community

1
1

answered Jan 24 '13 at 06:01

Shiridish

4,942
5
33
64

1

You should use "change" instead of "click" because i can update the input using the keyboard. – Jan 24 '13 at 06:03
Click event also works with keyboard input. See this fiddle- http://jsfiddle.net/4E7hB/ – Shiridish Jan 24 '13 at 06:15

score 0 · Answer 3 · answered Jan 24 '13 at 06:09

Here's a variation on your code that will work. You can add extra calls within the conditional statement to suit your needs.

http://jsfiddle.net/UefHa/

 function countDouble() {      
    var d = $("input.double").is(':checked');
    var s = $("input.single").is(':checked');

    if (d === true) {
       $(".twoday input").prop("disabled",true).addClass("disabled");
    } else {
       $(".twoday input").prop("disabled",false).removeClass("disabled");
    }

    if (s === true) {
       $(".oneday input").prop("disabled",true).addClass("disabled");
    } else {
       $(".oneday input").prop("disabled",false).removeClass("disabled");
    }
}

jQuery(document).ready(function(){              
    $('input[type=checkbox]').change( function() {
        countDouble();
    });
});

jQuery remove class on uncheck of checkbox

3 Answers3