Question

I’m having bug complications in my code. I’ve been researching for a few hours now for a solution. Here’s what I’m trying to achieve:

I have a page with 6 checkboxes. There is a wrapping div .control-case around each checkbox. If 5 checkboxes are checked, the remaining checkbox’s .control-case will have a class added .unselected.

NOW, if this wrapper .control-case .unselected is clicked, then I have a notice span that I want to be animated with jQuery color.

Good news: It somewhat works when it’s clicked.

Bad News: It sometimes triggers div’s without the class every now-and-then and it may also repeat the color changes (I assume due to a queue backup). How do I only allow it to be triggered once on the correct div ONLY when clicked?

P.S. I’ve also tried the .hasClass method. No success.

Here’s my Code:
http://pastebin.com/8XR7iHp2

I appreciate all your support! 🙂

Answer 1

Each time you run this code,

$('#type-controls .control-case.unselected').click(function() {

A new click handler is actually added to your code. Thus, causing the repeat firing. I have rewritten your code using another method. See if it fulfills your requirement.

    $(document).ready(function() {
        $('input:checkbox#foam-control, input:checkbox#reversecurve-control, input:checkbox#ultra-control, input:checkbox#pro-control, input:checkbox#icebreaker-control').attr('checked', true);
        $("#type-controls input[type=checkbox]").click(function() {
            var countchecked = $("#type-controls input[type=checkbox]:checked").length;
            if (countchecked >= 5) {
                $('#type-controls input[type=checkbox]').not(':checked').attr("disabled", true);
            }
            else {
                $('#type-controls input[type=checkbox]').not(':checked').attr("disabled", false);
            }
        });

        $("#type-controls label").click(function() {
            var countchecked = $("#type-controls input[type=checkbox]:checked").length;
            if (countchecked >= 5 && $(this).parent().hasClass('unselected')) {
                alert("Do notice");
                $('.max-notice').animate({
                    'backgroundColor': '#c30c08',
                    'color': '#fff'
                }, 400).delay(3000).animate({
                    'backgroundColor': '#fff',
                    'color': '#777'
                }, 300);
            }
        });
    });​

You can view the demo at http://jsfiddle.net/w7djF/1/