IE9错误：对象不支持属性或方法“ setAttribute”

Question

Function:

function disable_hidden_flip_questions(option, value){
    var first_q = document.getElementById('hidden_auto_questions');
    var second_q = document.getElementById('hidden_include_auto');
    var inputs_list = [];
    if(option == 'all'){
        inputs_list.push(first_q.getElementsByTagName("input"));
        inputs_list.push(second_q.getElementsByTagName("input"));
    }else if (option == 'first'){
        inputs_list.push(first_q.getElementsByTagName("input"));
    }else if(option == 'second'){
        inputs_list.push(second_q.getElementsByTagName("input"));
    }

    for (var inputs in inputs_list){
        for(var input in inputs_list[inputs]){
            if(inputs_list[inputs].hasOwnProperty(input) && input != 'length'){
                if(!value){
                    inputs_list[inputs][input].removeAttribute('disabled');
                }else{
                    inputs_list[inputs][input].setAttribute("disabled", "disabled");
                }
            }
        }
    }
}

Works perfectly fine in Chrome and Firefox, but in IE9 the console gives me an error on this line:

inputs_list[inputs][input].setAttribute("disabled", "disabled")

If I console.log(inputs_list[inputs][input]) I get this in Chrome:

(The input is being generated by RoR, which is why its name and id are so long)

<input class="radio_buttons optional" id="custom_attributes_trailer_insurance_endorsement_false" name="custom_attributes[trailer_insurance_endorsement]" type="radio" value="false" disabled="disabled"> 

Yay, that's what I wanted (and expected)... But in IE9's console I get this:

[object HTMLCollection]

Which is completely useless....

So question: Where am I going wrong in IE's exalted view? I know IE9 supports setAttribute , so I am assuming it has to do with my for...in loops.

Edit: So due to comments, the problem could be with the object types ( HTMLCollection being stored in an Array ) . If that is indeed the case, how do I go about making everything compatible data types?

Answer 1

HTMLCollections are not really arrays, so you may be getting inconsistent results in treating them that way. While all browsers will return an HTMLCollection from getElementsByTagName, there may be crucial differences in how they allow you to treat them. The best approach is to use the DOM methods to access things from the HTMLCollection - so you would use .item(0) to make sure you are referencing a dom node and not the collection itself (see https://developer.mozilla.org/en-US/docs/DOM/HTMLCollection ). Also, you wouldn't try to manipulate a collection list so if you do use arrays to push data onto, make sure they're separate data and not an HTMLCollection.

Answer 2

Solution in jquery:

  $("input[name=trailer_use]").click(function(event){
        if(event.target.id == "trailer_use_yes"){
            $("#hidden_auto_questions").removeClass('hide_auto').addClass('show_auto');
            $("input[name=trailer_insured]").removeAttr("disabled");
            show_trailer_warning(null, "remove");
        }else {
            $("#hidden_auto_questions").removeClass('show_auto').addClass('hide_auto');
            $("input[name=trailer_insured]").attr("disabled", "disabled");
            if($("#hidden_include_auto").hasClass("show_auto")){
                $("#hidden_include_auto").removeClass('show_auto').addClass('hide_auto');
                $('input[name="custom_attributes[trailer_insurance_endorsement]"]').attr("disabled", "disabled");
            }
            show_trailer_warning(null, "disclaimer");
        }
  });