CODEWITHSUNDEEP
javascriptjquery
MikeOscarEcho
MikeOscarEcho

Reputation: 548

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

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

Work Direction (selection):

Departments Affected (checkboxes) ?

Department Lineups (checkboxes) ?

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.

Upvotes: 0

Views: 206

Answers (2)

beautifulcoder
beautifulcoder

Reputation: 11320

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.

Upvotes: 1

chriz
chriz

Reputation: 1345

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

Upvotes: 0

Related Questions