JSFiddle - React, Tailwind, and code Playground

by qunzorez

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<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>

JavaScript

var userRole = "superAdmin"; // user.getDataByKey('role');
//change user role

function editUserRole() {
  var changeUserSelect = $(".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;

  }
}