选中和取消选中复选框无法正常工作

Question

//if work direction = mexico and departments checked = Shop and CNC
//check off Mexico in Dept. Affected but don't check off Shop and CNC

    $('#work_direction').live('click' , function() {
        if ($('select[name^="workorder[work_direction]"]').val() == "mexico") {

            $('.shop, .cnc').live('click', function(){
                $classname = $(this).attr('class');
                if($('.' + $classname + ":checked").length > 0){
                    $('#mexico').attr('checked','checked');
                } else {
                    $('#' + $classname).removeAttr('checked');
                }
            });

        }else if ($('select[name^="workorder[work_direction]"]').val() == "domestic"){

        $('.shop, .cnc').live('click', function(){
            $classname = $(this).attr('class');
            if($('.' + $classname + ":checked").length > 0){
                $('#' + $classname).attr('checked','checked');
            } else {
                $('#' + $classname).removeAttr('checked');
            }
        });

        }else{

        $('.cad, .design, .shop, .cnc').live('click', function(){
            $classname = $(this).attr('class');
            if($('.' + $classname + ":checked").length > 0){
                $('#' + $classname).attr('checked','checked');
            } else {
                $('#' + $classname).removeAttr('checked');
            }
        });
    }
});

Thats the jQuery I'm using to do the checks. And below is how my form is setup.

Work Direction (selection):

• Domestic
• Offshore
• Mexico

Departments Affected (checkboxes) ?

• [] CAD
• [] Design
• [] Shop
• [] CNC
• [] Accounting
• [] Offshore
• [] Mexico

Department Lineups (checkboxes) ?

• [] c - CAD
• [] d - DESIGN
• [] s - SHOP
• [] m - CNC

So the logic is that, when Work Direction is Domestic or Offshore and c, d, s, m are checked off on the bottom, the top ones that should get checked off should be CAD, DESIGN, SHOP, and CNC. However, if Mexico is selected and c, d, s, or m are checked off, the top ones that should get checked off are CAD, DESIGN, MEXICO but not SHOP and CNC.

Now sometimes CAD and DESIGN won't be affected so if Mexico is selected, almost always SHOP or CNC will be affected so if user selects s, or m at the bottom, Mexico above should get checked off but not SHOP or CNC.

I hope my explanation isn't too confusing but I'm not sure why my jQuery isn't working. Right now even if Mexico is selected and c, d, s, or m are selected, it'll check off CAD, DESIGN, SHOP, CNC, as well as MEXICO in the departments affected.

Answer 1

Try

$('#work_direction').change(function() { ... });
var callback = function () { ... };
$('.shop, .cnc').unbind('click', callback);
$('.shop, .cnc').bind('click', callback);

Finally, you may or may not run into issues using attr(), use prop() instead.

Edit

Assuming your callback is the same:

var callback = function() {
    $classname = $(this).attr('class');
    if($('.' + $classname + ":checked").length > 0) {
        $('#mexico').attr('checked','checked');
    } else {
        $('#' + $classname).removeAttr('checked');
    }
};

You may now attach it and detach as needed:

$('.shop, .cnc').unbind('click', callback);
$('.shop, .cnc').bind('click', callback);

This ensures it only gets called once. I usually wrap this around a helper object that can unit test.

Answer 2

you have to change all these lines $('#' + $classname).removeAttr('checked'); to, and try by using .prop()

 $('.' + $classname).prop('checked',false);

class notation is '.' not '#' change like below

//if work direction = mexico and departments checked = Shop and CNC
//check off Mexico in Dept. Affected but don't check off Shop and CNC

    $('#work_direction').live('click' , function() {
        if ($('select[name^="workorder[work_direction]"]').val() == "mexico") {

            $('.shop, .cnc').live('click', function(){
                $classname = $(this).attr('class');
                if($('.' + $classname + ":checked").length > 0){
                    $('#mexico').prop('checked',true);
                } else {
                    $('.' + $classname).prop('checked',false);
                }
            });

        }else if ($('select[name^="workorder[work_direction]"]').val() == "domestic"){

        $('.shop, .cnc').live('click', function(){
            $classname = $(this).attr('class');
            if($('.' + $classname + ":checked").length > 0){
                $('.' + $classname).prop('checked',true);
            } else {
                $('.' + $classname).prop('checked',false);
            }
        });

        }else{

        $('.cad, .design, .shop, .cnc').live('click', function(){
            $classname = $(this).attr('class');
            if($('.' + $classname + ":checked").length > 0){
                $('.' + $classname).prop('checked',true);
            } else {
                $('.' + $classname).prop('checked',false);
            }
        });
    }
});