仅superadmin可操作的JS <select>用户角色选择框功能修复咨询

问题出在以下几个可直接修复的点：

• 大小写不匹配：你定义的userRole变量值是superAdmin（首字母A大写），但判断条件用的是全小写的superadmin，JS字符串全等判断严格区分大小写，所以条件永远不成立，选择框始终处于禁用状态。
• 未触发执行控制函数：editUserRole函数定义完成后没有在页面初始化阶段调用，权限控制逻辑不会自动运行。
• 未设置默认禁用状态：select元素没有加默认禁用属性，非superadmin用户打开页面时选择框初始是可操作的，不符合权限要求。

修复后的JS代码 #

// 建议将获取到的角色统一转小写，避免接口返回大小写不一致导致判断失败
var userRole = "superadmin"; // user.getDataByKey('role').toLowerCase();
// 页面加载完成后自动执行权限控制逻辑
document.addEventListener('DOMContentLoaded', editUserRole)

function editUserRole() {
  var changeUserSelect = document.getElementById("sub-user-role");
  if (userRole.toLowerCase() === 'superadmin') {
    changeUserSelect.disabled = false;
  } else {
    changeUserSelect.disabled = true;
  }
}

修复后的HTML代码 #

只需给select元素添加默认disabled属性即可：

<label for="sub-user-role" class="translate_text" data-translation="USER_ROLE"></label>
<select id="sub-user-role" name="userRoleInfo" class="userRoleInfo" disabled>
  <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>

补充说明：前端权限控制仅做交互层面的限制，后端接收表单提交时必须再次校验当前操作用户的角色，仅superadmin发起的请求才处理角色修改逻辑，避免用户手动修改前端代码绕过限制。

内容的提问来源于stack exchange，提问作者Jo4energy