选中和取消选中复选框无法正常工作 [英] Check and uncheck checkbox not working correctly

问题描述

//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.下面是我的表单设置方式.

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

工作方向(选择):

• 国内
• 离岸
• 墨西哥

受影响的部门(复选框)?

Departments Affected (checkboxes) ?

• [] CAD
• []设计
• []商店
• [] CNC
• []会计
• []离岸
• []墨西哥

部门阵容(复选框)?

• [] c-CAD
• [] d-设计
• [] s-SHOP
• [] m-CNC

因此，逻辑是，当工作方向"为国内"或离岸"并且在底部选中c，d，s，m时，应选中的顶部应该是CAD，DESIGN，SHOP和CNC.但是，如果选择了墨西哥并且选中了c，d，s或m，则应该选中的最上面的是CAD，DESIGN，MEXICO，但不是SHOP和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.

现在，有时CAD和DESIGN不会受到影响，因此，如果选择墨西哥"，几乎总是会影响SHOP或CNC，因此，如果用户在底部选择s或m，则应取消选中上面的墨西哥，而不会选中"SHOP"或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.

我希望我的解释不会太混乱，但是我不确定为什么我的jQuery无法正常工作.现在，即使选择了墨西哥并选择了c，d，s或m，它也会在受影响的部门中检查CAD，DESIGN，SHOP，CNC和MEXICO.

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.

推荐答案

尝试

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

最后，使用attr()可能会或可能不会出现问题，请改用prop().

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

假设您的回调相同:

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.

这篇关于选中和取消选中复选框无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！