Check appropriate checkboxes when certain option is selected from dropdown select?

Question

fiddle

I'm sorry to ask this question, I hate asking on here and I don't wanna be seen as a vampire but I'm so stuck with this and I don't think I'm on the right lines at all, if this doesn't make sense at all comment and I'll try explain. I'm desperate!

Basically what I'm working on requires you to select a company, and when you do that it generates some checkboxes. When you select a profile from the dropdown, it needs to tick the appropriate checkboxes. The checkboxes it should tick are whatever that profile has in it's PRIVILEGE_PROFILES.PRIVILEGE CODES (these are the checkboxes).

I've got my code in a fiddle here http://jsfiddle.net/shaunyweasel/dj8jr19e/5/ . The arrays are at the top of the fiddle. I was trying to do it so that if the text value of the label was equivalent to to the SEC_PRIVILEGES.Name then tick those checkboxes, however that doesn't really work so I'm not sure if there's a better way to go about it. The below method is what I've been working on to try get it to tick the checkboxes but I'm pretty sure it's wrong.

$(document).on('change', '#select_profile', function () {


var select = $("#select_profile option:selected").text(),
    selectedProfile, privileges, div, label, access;

var checked = document.getElementsByTagName('input');

for (var i = 0; i < checked.length; i++) {
    if (checked[i].type == 'checkbox') {
        checked[i].checked = false;
    }
}

if (select !== 'None') {

    for (var i = 0; i < PRIVILEGE_PROFILES.length; i++) {
        if (PRIVILEGE_PROFILES[i].PROFILE_ID === select) {
            selectedProfile = PRIVILEGE_PROFILES[i];
            privileges = selectedProfile.PRIVILEGE_CODE;
        }
    }


    for (var i = 0; i < SEC_Privileges.length; i++) {
        if (privileges[i] === SEC_Privileges[i].Unique_Code) {

            console.log(privileges);
            var labels = document.getElementsByTagName('label');
            var checked = document.getElementsByTagName('input');

            for (var c = 0; c < checked.length; c++) {
                if (SEC_Privileges[i].Name == labels) {
                    checked[c].checked = true;
                }
            }

        }

    }
}

  });

If this doesn't make sense, here's a step by step of how it works and where i'm at and stuck:

1. User selects a company from the company_selection dropdown

2. When company is selected it generates checkboxes for that company depending on it's COMPANY_PRIVILEGES.UNIQUE_CODE (the array)

3. The user then has to select something from the profile_selection, and depending what profile they select it will check the appropriate checkboxes, depending on what PRIVILEGE_PROFILES.PRIVILEGE_CODES it has. (so if you selected Crew then it would just tick the View Tyrell box as that's the only profile it has)

Answer 1

Here is the working example: DEMO

I have changed following things:

1) When you are creating the checkboxes then i have added class name to those checkboxes similar to UNIQUE_CODE

$(document).on('change', '#select_company', function () {

        // declare variables before the function
        var select = $("#select_company option:selected").text(),
            selectedProfile, privileges, div, label, access;

        // remove access checkboxes from previously selected profile
        $('.apps input[type=checkbox]').remove();
        $('.apps label').remove();

        // if the selected option is 'None', do nothing, else...
        if (select !== 'None') {

            // match the selected profile in the dropdown with the JS PROFILES object
            for (var i = 0; i < COMPANY_PRIVILEGES.length; i++) {
                if (COMPANY_PRIVILEGES[i].COMPANY_CODE === select) {
                    selectedProfile = COMPANY_PRIVILEGES[i];
                    privileges = selectedProfile.UNIQUE_CODE;
                }
            }
            // match the associated privileges from the profile within the entire privilege list
            for (var j = 0; j < privileges.length; j++) {
                for (var i = 0; i < SEC_Privileges.length; i++) {
                    if (privileges[j] === SEC_Privileges[i].Unique_Code) {
                        // get the div with the id === SEC_Privileges[i].Group_code
                        div = document.getElementById(SEC_Privileges[i].Group_Code);
                        access = document.createElement('input');
                        access.type = 'checkbox';
                        access.className  = SEC_Privileges[i].Unique_Code;
                        label = document.createElement('label');
                        // create a textnode with the unique code from the privileges
                        label.appendChild(document.createTextNode(SEC_Privileges[i].Name));
                        div.appendChild(label);
                        div.appendChild(access);

                    }
                }
            }
        }
    });

2) Written simple function to check the checkbox based on the classname:

$(document).on('change', '#select_profile', function () {
    var selectedValue = $("#select_profile option:selected").text(),
    selectedProfile, privileges, div, label, access;

    console.log(selectedValue);
    for (var i = 0; i < PRIVILEGE_PROFILES.length; i++) {
        if (PRIVILEGE_PROFILES[i].PROFILE_ID === selectedValue) {
            privileges = PRIVILEGE_PROFILES[i].PRIVILEGE_CODE;
        }
    }
    for(var j = 0; j < privileges.length; j++) {
     $('.'+privileges[j]).attr("checked", "true");   
    }


});

Answer 2

Is there a reason why you do not use jQuery selectors in your code?

Anyway, I've made an update to solve your problem (not using jQuery) http://jsfiddle.net/dj8jr19e/7/

The main issue is that you did not set any IDs to your checkboxes. I've set an ID corresponding to the Unique_Code of your privileges.

access.id = SEC_Privileges[i].Unique_Code;

Then when you iterate through the associated privileges from the selected profile, I've simply used getElementById because the privileges contains Unique_Code used as Ids of the checkboxes.