IE浏览器不支持toggleAttribute方法的兼容实现方案求助

问题根因 #

代码失效有两个核心兼容问题：

• IE全版本不支持toggleAttribute()方法，这是失效的核心原因
• 低版本IE（IE8及更早）不支持let关键字、addEventListener方法，如需兼容更低版本需要额外适配

兼容方案1：适配IE11及以上版本 #

无需调整事件绑定逻辑，仅替换属性切换逻辑即可：

// 兼容IE11可保留let，如需兼容更低版本请替换为var
var input = document.querySelector("input");
var button = document.querySelector(".checkbox");

button.addEventListener("click", function() {
    // 直接操作元素的disabled布尔属性，IE全版本兼容
    input.disabled = !input.disabled;
});

兼容方案2：适配IE8及更低版本 #

额外兼容低版本IE的事件绑定逻辑：

var input = document.querySelector("input");
var button = document.querySelector(".checkbox");

// 兼容事件绑定逻辑
function bindEvent(el, eventName, handler) {
    if (el.addEventListener) {
        el.addEventListener(eventName, handler);
    } else if (el.attachEvent) {
        el.attachEvent('on' + eventName, handler);
    } else {
        el['on' + eventName] = handler;
    }
}

bindEvent(button, 'click', function() {
    input.disabled = !input.disabled;
});

注意事项 #

• 上述代码默认对应单输入框、单复选框的场景，如果是多组联动需要调整选择器逻辑，按组匹配对应元素即可
• 操作布尔属性时直接使用元素.属性名 = 布尔值的写法，比setAttribute/removeAttribute兼容性更强，适配所有IE版本

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