I am trying to work with checkboxes with javascript. IE (using IE8) seems to have an issue with the code below. It works perfectly well in Firefox.

This is my sample html.

<input type="checkbox" name="one" id="one" />
<input type="checkbox" name="two" id="two" />
<input type="checkbox" name="three" id="three" />
<input type="checkbox" name="four" id="four" />
<input type="checkbox" name="five" id="five" />

IE just disables the checkbox with id "one" without touching "five" and "three".

var all = new Array("one","two","three","four","five");
var some = new Array("one","five","three");

disableFew(some);

function disableFew(few){
    for (var i in all){
        document.getElementById(all[i]).disabled = false;
    }
    for (var j in few){
        if(document.getElementById(few[j]).nodeName == 'INPUT'){
            document.getElementById(few[j]).checked = false;
        }
        document.getElementById(few[j]).value = 'disabled';
        document.getElementById(few[j]).disabled = true;
    }
}

Any clues on what's going on? I am just a beginner in web development so I might be missing some nuances of IE/Firefox.

Will appreciate any help !

I am trying to work with checkboxes with javascript. IE (using IE8) seems to have an issue with the code below. It works perfectly well in Firefox.

This is my sample html.

<input type="checkbox" name="one" id="one" />
<input type="checkbox" name="two" id="two" />
<input type="checkbox" name="three" id="three" />
<input type="checkbox" name="four" id="four" />
<input type="checkbox" name="five" id="five" />

IE just disables the checkbox with id "one" without touching "five" and "three".

var all = new Array("one","two","three","four","five");
var some = new Array("one","five","three");

disableFew(some);

function disableFew(few){
    for (var i in all){
        document.getElementById(all[i]).disabled = false;
    }
    for (var j in few){
        if(document.getElementById(few[j]).nodeName == 'INPUT'){
            document.getElementById(few[j]).checked = false;
        }
        document.getElementById(few[j]).value = 'disabled';
        document.getElementById(few[j]).disabled = true;
    }
}

Any clues on what's going on? I am just a beginner in web development so I might be missing some nuances of IE/Firefox.

Will appreciate any help !

• javascript
• internet-explorer
• checkbox
• for-loop

Share Improve this question Follow asked Jun 20, 2012 at 1:06 WildernessWilderness 1,40922 gold badges1717 silver badges2828 bronze badges 5

• If you change the order of the element ids in your some array does it still do just the first one? (By the way, best practice on declaring arrays is to use array literal syntax: var some = ["one","five","three"]; or var some = []; for an empty array.) – nnnnnn Commented Jun 20, 2012 at 1:36
• @nnnnnn: The behavior still remains the same, irrespective of the order. I call several functions on page load/some event. It looks like IE redraws (acts) only after the script handles it control. I still am trying to find a way to return contorl to IE after every function. Any ideas? – Wilderness Commented Jun 20, 2012 at 17:54
• It's normal for all browsers (not just IE) to plete the current script before redrawing. I'm not sure what you mean by "after every function" given that you've only shown one function, but you can give control back to the browser to allow redraw by scheduling your functions via setTimeout() (with a short delay for each, say 10ms). I really don't understand why the above code doesn't work in IE8, but the redraw thing is a separate issue so you might like to post that part as a new question with more detail. – nnnnnn Commented Jun 20, 2012 at 21:48
• P.S. I don't have IE8, but your code worked fine in IE9: jsfiddle/w4ssG – nnnnnn Commented Jun 20, 2012 at 21:49
• @nnnnnn Apparently, IE does not understand document.getElementById(few[j]).value = 'disabled';document.getElementById(few[j]).disabled = true; when few[j] is a select list element. I changed to jQuery and it worked. – Wilderness Commented Jun 20, 2012 at 22:24

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

You should be using a regular for loop:

for(var i=0; i<all.length; i++) ...
for(var j=0; j<some.length; j++) ...

The for..in you're using will iterate other properties from the array prototype, not only your array indexes.

Also, I'd avoid using all as a variable name, maybe IE can get confused (it has its document.all). But I'm not sure about this.