基于下拉菜单选中值启用/禁用表单元素的最优方案

我来帮你搞定这个动态字段控制的需求，结合你用的jQuery和Chosen插件，这里有个清晰又高效的实现方案，完全匹配你的需求：

核心思路 #

每次切换Access Level时，我们先把所有需要控制的字段（Region、State、City）统一设为禁用状态，再根据选中的级别逐步启用对应的字段，同时还要更新Chosen插件的界面，避免出现原生select状态变了但插件界面没同步的问题。

完整实现代码 #

首先替换你原来的JavaScript函数，改成下面这样：

// 提前获取需要操作的元素，避免重复DOM查询
const $region = $('#frm_region');
const $state = $('#frm_state');
const $city = $('#frm_city');

$('#frm_accesslevel').on('change', accessLevel);

function accessLevel() {
  const fldVal = $(this).val();
  
  // 先重置所有字段为禁用状态
  $region.prop('disabled', true);
  $state.prop('disabled', true);
  $city.prop('disabled', true);
  
  // 更新Chosen插件状态
  $region.trigger('chosen:updated');
  $state.trigger('chosen:updated');
  $city.trigger('chosen:updated');
  
  switch(fldVal){
    case '1':
      // Level1：保持所有禁用，无需额外操作
      break;
    case '2':
      // Level2：仅启用Region
      $region.prop('disabled', false).trigger('chosen:updated');
      break;
    case '3':
      // Level3：启用Region和State
      $region.prop('disabled', false).trigger('chosen:updated');
      $state.prop('disabled', false).trigger('chosen:updated');
      break;
    case '4':
      // Level4：启用所有三个字段
      $region.prop('disabled', false).trigger('chosen:updated');
      $state.prop('disabled', false).trigger('chosen:updated');
      $city.prop('disabled', false).trigger('chosen:updated');
      break;
    default:
      // 默认情况（未选择级别）：保持所有禁用
      break;
  }
}

代码说明 #

• 提前缓存DOM元素：把#frm_region、#frm_state、#frm_city提前存成变量，避免每次触发change事件都重新查询DOM，提升性能。
• 先统一禁用：不管切换到哪个级别，先把所有字段设为禁用，再按需启用，这样逻辑更清晰，不会出现从高等级切回低等级时，之前启用的字段没被禁用的问题。
• 同步Chosen插件状态：因为你用了Chosen美化下拉框，修改原生select的disabled属性后，必须调用trigger('chosen:updated')让插件同步更新界面，否则用户看到的还是旧状态。
• 覆盖所有场景：包含了未选择级别（default）的情况，确保所有边界条件都被处理。

额外提示 #

如果你的Region、State、City下拉框是动态加载选项的，记得在加载完成后也调用一次chosen:updated，保证插件能正确渲染新选项。

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