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');
            }
        });
    }
});

这就是我用来执行检查的jQuery。以下是我的表单设置方式。

工作方向（选择）：

国内
离岸
墨西哥

受影响的部门（复选框）？

[] CAD
[]设计
[]购物
[] CNC
[]会计
[] Offshore
[]墨西哥

部门阵容（复选框）？

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

所以逻辑是，当工作方向是国内或离岸时，底部检查c，d，s，m，应该检查的顶部应该是CAD，DESIGN，SHOP和CNC。但是，如果选择墨西哥并且选中了c，d，s或m，那么应该检查的顶部是CAD，DESIGN，MEXICO，而不是SHOP和CNC。

现在有时CAD和DESIGN不会受到影响所以如果选择墨西哥，几乎总是SHOP或CNC会受到影响，所以如果用户选择s或m在底部，上面的墨西哥应该被检查但不是SHOP或CNC。

我希望我的解释不会太混乱，但我不确定为什么我的jQuery不起作用。现在，即使选择了墨西哥并且选择了c，d，s或m，它也会在受影响的部门检查CAD，DESIGN，SHOP，CNC以及墨西哥。

Answer 1

尝试

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

最后，您可能会或可能不会遇到使用attr（）的问题，请改用prop（）。

修改

假设你的回调是相同的：

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

您现在可以附加它并根据需要分离：

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

这确保它只被调用一次。我通常将它包装在一个可以进行单元测试的辅助对象周围。

Answer 2

您必须将所有这些行$('#' + $classname).removeAttr('checked');更改为，并尝试使用.prop()

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

课程表示法是＆＃39;。＆＃39;不是＆＃39;＃＆＃39;改变如下

//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);
            }
        });
    }
});

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

2 个答案:

修改