华为浏览器中select option disabled attr失效，JS及jQuery设置无效？

失效原因 #

华为浏览器基于旧版Chromium深度定制的分支内核，对原生option元素的disabled布尔属性存在解析兼容缺陷：

• 无法正确识别布尔属性的判定逻辑，会把字符串形式的"true"判定为非禁用状态，对应你之前写的document.getElementById("cartype").options[1].disabled="true";代码，因为给布尔属性赋了字符串值，华为内核直接识别为非禁用
• 部分极端版本甚至会直接忽略标签上硬编码的原生disabled标记，哪怕是符合规范的disabled属性写法、或者jQuery prop()设置的布尔值状态（也就是你尝试的$("#cartype option[value=saab]").prop("disabled",true);写法），都可能被内核绕过，允许用户选中本应禁用的选项

可用兼容方案 #

• 选中行为拦截兜底
  给目标select元素绑定事件，当用户尝试选中值为saab的禁用选项时，强制将选中值切回之前留存的合法选项，从交互层面阻断无效选择：

  const selectEl = document.getElementById('cartype');
  // 缓存当前合法的选中值
  let validVal = selectEl.value;
  // 拦截常规选中的change动作
  selectEl.addEventListener('change', (e) => {
    if (selectEl.value === 'saab') {
      selectEl.value = validVal;
      e.preventDefault();
    } else {
      validVal = selectEl.value;
    }
  })
  // 兼容华为浏览器下拉弹层的选中触发逻辑，补充click事件拦截
  selectEl.addEventListener('click', () => {
    if (selectEl.value === 'saab') {
      selectEl.value = validVal;
    }
  })
  

• 直接移除DOM节点适配
  如果不需要动态恢复该选项的可选状态，直接将值为saab的option从DOM树中移除，待需要展示时再重新插入对应节点，可完全绕开内核的属性解析bug
• 自定义下拉组件替代原生select
  对兼容性要求高的业务场景，放弃使用原生select组件，改用可完全自主控制状态的div模拟下拉选择器，自行实现选项的禁用态逻辑，从根源上规避不同内核的原生兼容问题

注意事项 #

• 布尔属性的标准写法是不带赋值的disabled，设置为disabled="true"的写法本身就不符合W3C规范，会触发多浏览器的解析异常，所有场景下都应避免
• 该问题属于华为旧内核的已知缺陷，无法通过纯HTML属性、CSS样式设置的方式根治，必须搭配JS拦截逻辑兜底

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