如何使用JavaScript启用被禁用的select下拉选择输入框

• 你之前写的两段JS代码，都是在操作select元素的disabled属性，但你提供的HTML里，select标签本身根本没有设置disabled，只加了readonly属性。这里要明确：readonly属性仅对文本输入框、多行文本输入框这类文本输入类表单控件生效，对select下拉选择框没有原生的禁用效果。
• 你之所以感觉下拉框处于不可用状态，核心原因是除了第一个「All distances」选项之外，剩下所有的option选项都单独添加了disabled属性被单独禁用，下拉展开后这些选项根本点不了，才会表现出整体不可用的效果。你之前的代码完全没有处理这些被单独禁用的子选项，自然不会生效。

你需要同时移除select上冗余的readonly属性，以及所有子选项的禁用状态，代码如下：

// 获取目标下拉框元素
const selectElem = document.querySelector("#radius");
// 移除select上不生效的readonly属性
selectElem.removeAttribute("readonly");
// 遍历所有下拉选项，移除禁用状态
selectElem.querySelectorAll("option").forEach(opt => {
  opt.disabled = false;
});

补充说明：如果你后续需要整体禁用/启用select下拉框，应该给select标签本身添加/移除disabled属性，这时候你最开始写的.disabled = false或者.removeAttribute("disabled")写法才会对select整体生效。但要注意：如果子选项单独设置了disabled，哪怕select本身是启用状态，这些被单独禁用的选项依然无法选中，需要同步处理子选项的状态。

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