AttachEvent не работает на IE11

Question

Я пытаюсь сделать два флажка, из которых только один может быть выбран в любой момент времени. Я много искал форумы и нашел несколько предложений.

if (document.attachEvent){
// For IE Browsers.
document.attachEvent("DOMContentLoaded", function (event) {

    var saSelector = document.querySelector('input[name=saWrite]');
    var cgSelector = document.querySelector('input[name=cgWrite]');

    if (cgSelector !== null) {
        cgSelector.attachEvent('change', function (event) {
            if (cgSelector.checked) {
                document.querySelector('input[name=saWrite]').checked = false;
            }
        }); 
    }

    if (saSelector !== null) {
        saSelector.attachEvent('change', function (event) {
            if (saSelector.checked) {
                document.querySelector('input[name=cgWrite]').checked = false;
            }
        }); 
    }       
});
}

Я написал аналогичную функцию с addEventListener вместо attachEvent для браузеров не IE. Это работает на Firefox. Но этот метод почему-то не работает для IE. Я что-то здесь не так делаю? Любые предложения будут полезны. Я хотел бы использовать JQuery для этого. Но я не могу.

Answer 1

https://jsfiddle.net/20g7ym8q/

Вы говорите, что хотите использовать JQuery, но не можете. Я понимаю, что это может показаться реальным ограничением, но это не так. Все, что вы можете сделать с JQuery, вы можете сделать с JavaScript.

Ваш код не будет работать в IE11, потому что attachEvent устарел и удален, чтобы принять addEventListener в качестве стандартного способа прикрепления события во всех современных браузерах. Если вы ищете поддержку поколений без JQuery и без дублирования кода, то, вероятно, лучше всего настроить собственный объект для использования в качестве промежуточного слоя между вашим кодом и браузером.

 function $(ele) {
  return {
    ele: document.querySelector(ele),
    on: function(ev, fn) {
      (document.attachEvent) ? 
      this.ele.attachEvent(ev, fn) :
      this.ele.addEventListener(ev, fn);
    },
    checked: function(change) {
     if(typeof change !== undefined) this.ele.checked = change;
     return this.ele.checked;
    }
  }
}

Выше приведена функция, которая возвращает Object с двумя методами и свойством. Он работает аналогично JQuery для удобства и согласованности, но не требует дополнительных затрат на включение всей библиотеки JQuery.

Методы позволяют добавить событие, используя .on с типом события и функцией в качестве параметров. Методы также позволяют вам установить или получить свойство selected указанного элемента. .checked() просто вернет логическое значение, если флажок установлен, .checked(boolean) установит свойство elements в желаемое состояние.

На практике, чтобы решить вашу дилемму только с одним допустимым флажком, вы можете сделать это:

var sa = $('input[name="saWrite"]');
var cg = $('input[name="cgWrite"]');

cg.on('click', function(ev) {
  sa.checked(false)
});

sa.on('click', function(ev) {
  cg.checked(false);
});