点击编辑按钮时，如何移除select的disabled与input/textarea的readonly属性？

你的代码失败原因很明确：removeAttribute()方法一次只能传入一个属性名称，不能用逗号分隔多个属性，所以element.removeAttribute("readonly, disabled")这种写法无效。

下面提供几种可行的解决方案：

方案1：按元素类型分别处理 #

针对input/textarea和select的不同属性需求分开处理，逻辑清晰：

const button = document.querySelector("#removeAttribute");
const inputTextElements = document.querySelectorAll("input, textarea");
const selectElements = document.querySelectorAll("select");

button.addEventListener("click", () => {
    // 移除input、textarea的readonly属性
    inputTextElements.forEach(el => el.removeAttribute("readonly"));
    // 移除select的disabled属性
    selectElements.forEach(el => el.removeAttribute("disabled"));
    // 隐藏按钮（替代HTML内联的onclick逻辑）
    button.style.display = "none";
});

方案2：统一遍历并检查属性 #

遍历所有目标元素，检查元素是否存在对应属性再移除，适合元素属性混合的场景：

const button = document.querySelector("#removeAttribute");
const elements = document.querySelectorAll("input, textarea, select");

button.addEventListener("click", () => {
    elements.forEach(element => {
        if (element.hasAttribute("readonly")) {
            element.removeAttribute("readonly");
        }
        if (element.hasAttribute("disabled")) {
            element.removeAttribute("disabled");
        }
    });
    button.style.display = "none";
});

方案3：直接设置DOM布尔属性（推荐） #

readonly和disabled都是DOM元素的布尔属性，直接设置为false即可取消状态，无需检查属性是否存在，写法更简洁：

const button = document.querySelector("#removeAttribute");
const elements = document.querySelectorAll("input, textarea, select");

button.addEventListener("click", () => {
    elements.forEach(element => {
        element.readOnly = false; // 注意是驼峰命名readOnly，对应HTML的readonly属性
        element.disabled = false;
    });
    button.style.display = "none";
});

额外优化 #

建议把按钮的隐藏逻辑从HTML内联的onclick="style.display = 'none'"移到JS事件监听里，像上面代码那样，避免内联事件和监听事件混合，代码更易维护。

内容的提问来源于stack exchange，提问作者Q-Tip