AttachEvent Not Working on IE11

Question

I am trying to make two checkboxes, out of which only one can be selected at any point of time. I searched the forums a lot and found a few suggestions.

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;
            }
        }); 
    }       
});
}

I wrote a similar function with addEventListener in place of attachEvent for non-IE browsers. That works on Firefox. But this method somehow doesn't work for IE. Am I doing something wrong here? Any suggestions would be helpful. I wish i could use JQuery for this. But i cant.

IE9+ supports DomContentLoaded https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded#Browser_compatibility Are you trying to make above code usable for prior IE versions? Have you tried placing console.log statements and see where your code does not work? — Rikin, Jan 27 '17 at 20:08
Well I cant use radio button, because there are more options as well, which can be selected. I am trying to make it work on IE8+ at least. I will try to do some console.log and see where it goes wrong. — hell_storm2004, Jan 27 '17 at 20:29

score 2 · Accepted Answer · answered Jan 28 '17 at 03:59

https://jsfiddle.net/20g7ym8q/

You say you want to use JQuery but you can't. I realize starting out that may seem like a real limitation, but it isn't. Anything you can do with JQuery you can do with JavaScript.

Your code won't work on IE11 because attachEvent has been deprecated and removed in favor of accepting addEventListener as the standard way to attach an event in all modern browsers. If you're looking for generational support without JQuery and without code duplication, setting up your own Object to use as an intermediate layer between your code and the browser is probably the best way to go about this.

 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;
    }
  }
}

The above is a function that returns an Object with two methods and a property. It works similarly to JQuery for familiarity and consistency, but it is without the overhead of including the entire JQuery library.

The methods allow you to add an event using .on with an event type and function as parameters. The methods also allow you to set or get the checked property of the specified element. .checked() will simply return a boolean as to whether the box is checked, .checked(boolean) will set the elements property to the desired state.

In practice, to solve your dilemma of only one allowable check box, you could do this:

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);
});

AttachEvent Not Working on IE11

1 Answers1