I am currently working on a form, where users can change some settings. I include a setting to change the role of a user (user, admin, superadmin), which is only supposed to be enabled for users with the 'superadmin' role.
Image of how it looks like now

After a superadmin changes a role, I want the value to be saved when i click the save button that I have at the bottom of my form.
So far I have tried to change the properties of the <select> element to Enabled for 'superAdmins', where i made the default value 'disabled' and vice versa.
Any ideas on how I could fix the function? thank you!
var userRole = "superAdmin"; // user.getDataByKey('role');
//change user role
function editUserRole() {
var changeUserSelect = document.getElementById("sub-user-role");
if (userRole === 'superadmin') {
changeUserSelect.disabled = false;
//$("#sub-user-role").prop('disabled', false);
} else {
//$("#sub-user-role").prop('disabled', true);
changeUserSelect.disabled = true;
}
}
<label for="sub-user-role" class="translate_text" data-translation="USER_ROLE"></label>
<select id="sub-user-role" name="userRoleInfo" class="userRoleInfo" type="text">
<option value="user" class="optionUser" data-translation="USER_ROLE_USER">user</option>
<option value="admin" class="optionAdmin" data-translation="USER_ROLE_ADMIN">admin</option>
</select>