Check the appropriate checkboxes if any option is selected from the dropdown?
Sorry to ask this question, I don’t like asking here and I don’t want to be seen as a vampire, but I’m so stuck with this and I don’t think I’m on the right track all if it doesn’t make sense at all comments, and I'll try to explain. I'm desperate!
Basically I am working on selecting a company and when you do it it generates some checkboxes. When you select a profile from the dropdown list, it needs to check the appropriate boxes. The flags it should be pointed to belongs to any PRIVILEGE_PROFILES.PRIVILEGE CODES profile (these are flags).
I have my code in a fiddle http://jsfiddle.net/shaunyweasel/dj8jr19e/5/ . Arrays are at the top of the violin. I tried to do it so that if the text value of the label is equivalent to SEC_PRIVILEGES.Name then check these checkboxes, however this doesn't work, so I'm not sure if there is a better way to do it, The following method is what I was working on to try and check the boxes, but I'm pretty sure this is 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 it doesn't make sense, here's a step by step how it works and where I am and am stuck:
-
The user selects a company from the company_selection dropdown list.
-
When a company is selected, it generates checkboxes for that company depending on it. COMPANY_PRIVILEGES.UNIQUE_CODE (array)
-
The user then has to select something from profile_selement, and depending on which profile they selected, he will check the appropriate checkboxes, depending on what he has PRIVILEGE_PROFILES.PRIVILEGE_CODES. (so if you choose Crew it will just mark Tyrell's View window as the only profile it has)
source to share
Is there any reason why you are not using jQuery selectors in your code?
Anyway, I made an update to solve your problem (not using jQuery) http://jsfiddle.net/dj8jr19e/7/
The main problem is that you haven't set any identifiers for your checkboxes. I have set ID
it to match Unique_Code
your privileges.
access.id = SEC_Privileges[i].Unique_Code;
Then when you iterate over the associated privileges from the selected profile I just used getElementById
because it privileges
contains Unique_Code used as checkbox IDs.
source to share
Here's a working example: DEMO
I changed the following things:
1) When you create checkboxes I added class name for these 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 checkbox based on class name:
$(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");
}
});
source to share