0

So here is what my form looks like.

http://jsfiddle.net/jFN5T/5/

and the JS I tried:

$('#work_direction').on('click' , function() {

    $('.cad, .design, .shop, .cnc').on('click', function(){

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

});

Theres some functionality there and it works as far as I know. However, I want to make it so that when "Mexico" is chosen in Direction, when user checks off S - SHOP or M - CNC, it shouldn't check off these two in Departments Affected

  • Shop (John Doe [3])
  • CNC (John Doe [4])

but instead it should check off

  • Mexico (John Doe [7])

The form should work the way it does for both Domestic and Offshore, in that when the bottom C, D, S, M get checked off then the top CAD, Design, Shop, CNC, get checked off. The functionality changes like described above when user chooses "Mexico" as direction.

Here is the code I tried, Check and uncheck checkbox not working correctly but I had issues described in beautifulcoder's comment: "Basically, I think you are running into issues with event bubbling. If you use live(), jQuery will add the event now and in the future. The next time you add an event it gets appended to the list."

I'm not sure how to implement a fix or whether there is a better approach.

Community
  • 1
  • 1
MikeOscarEcho
  • 535
  • 2
  • 12
  • 27

2 Answers2

1

Although there may be an underlying issue with event bubbling (since you are adding a new onClick() function every time the dropdown is clicked), I believe you are attacking the problem wrong. Look at your code:

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

This portion grabs the current element's class name and checks to see if it is checked. It then finds the element whose ID matches its own class name and either checks or un-checks it. In your example, the element whose ID is mexico will never be selected unless your CNC checkbox has a class name of mexico. Also, nowhere in your code are you changing these class names when the dropdown select box's value changes.

I would suggest that if you can use HTML5, use the data feature it provides. This would allow you to specify which elements should be checked without conflicting or improper IDs/class names.

Here's an example of it in action: JSFiddle

The jQuery in the example:

$('#work_direction').on('change', function() {
    if ($(this).val() == 'mexico') {
        $('.shop, .cnc').data('check', 'mexico');
    }
    else {
        $('.shop').data('check', 'shop');
        $('.cnc').data('check', 'cnc');
    }
});

$('.cad, .design, .shop, .cnc').on('change', function() {
    // Split into space-delimited array in case we want
    // to check off more than one
    var elemsToCheck = $(this).data('check').split(' ');
    var checked = $(this).attr('checked');
    $.each(elemsToCheck, function() {
        $('#' + this).attr('checked', !!checked);
    });
});

My example also allows for multiple checkboxes to be specified in the data-check attribute. Just delimit each one by a space.

Nate Kibler
  • 652
  • 3
  • 14
0

have a look at the change event coupled with the prop function like so 

$('#work_direction').on('change' , function() {
    var direction = $(this).val();
    $('#'+direction).prop('checked', true);
});

http://jsfiddle.net/jFN5T/7/

haxxxton
  • 6,422
  • 3
  • 27
  • 57
  • Looks good but this checks Mexico (John Doe [7]) when the direction changes to Mexico. I'm looking for Mexico (John Doe [7]) to get checked when the Direction is Mexico and CNC or SHOP are checked at the bottom. – MikeOscarEcho Mar 31 '14 at 14:54
  • so what order does the user click through these things? they select direction, then check CNC and/or SHOP. then it auto checks John Doe [7]? is the intention not to allow the user to click the checks next to John Doe [7] manually? because otherwise CNC and SHOP etc should be above the staff members for useabilty – haxxxton Mar 31 '14 at 14:56
  • I agree 100% with what you're saying and I was a bit alarmed when I found out that managers don't even click on the checkboxes under DEPARTMENTS AFFECTED. Unfortunately, its hard to change their ways let alone get them to double check before submitting the form. The process goes, Work Direction -> Departments and whatever they check off in Deparments it should check off the correct Departments Affected checkbox above it. – MikeOscarEcho Mar 31 '14 at 14:59
  • ah i gotcha, looks like Nate Kibler is on track with what you need.. if you cant get away with using `data` attributes you can probably do the same thing with `class` attributes and the `.is()` jQuery method – haxxxton Mar 31 '14 at 15:04
  • ^ That's correct. Though it's frowned upon considering class names are generally used to group things together (i.e. for styling purposes) and `data` attributes are used to... well, store data. – Nate Kibler Mar 31 '14 at 15:05
  • @NateKibler totally agree :) was more a suggestion for funky IE8 workaround rather than trying to find a data attribute polyfill :) – haxxxton Mar 31 '14 at 15:17
  • 1
    Shouldn't need a workaround. Data attributes are supported in all modern browsers, including IE8: http://caniuse.com/dataset – Nate Kibler Mar 31 '14 at 15:21
  • well there you go.. i apologise if i was pointing anyone in the wrong direction with that thought train.. still there is concerns around 'validation' http://stackoverflow.com/a/3957879/648350.. but.. if we're getting that picky i s'pose using classes isnt technically correct either – haxxxton Mar 31 '14 at 15:25