Question

I have this function:

function disableDiv(divId, action){
    var divId = byId(divId);

    if(action==true){
    divId.style.display='none';
    }
    else if(action==false){
    divId.style.display='block';
    }

    var inputs = divId.getElementsByTagName("input");
    var selects = divId.getElementsByTagName("select");
    var i;

    for (i=0; i<inputs.length; i++){
        inputs[i].disabled=action;
        }

    for (i=0; i<selects.length; i++){
        selects[i].disabled=action;
        }
}

This takes a divId (id of DIV) and an action (false or true) and gets all inputs and selects inside the div, and sets their disabled attribute to either false or true.

According to Firebug, the elements inside the Div are disabled all the time. But they should be active once hitting a drop-list option… The triggering is fine so you know.
I can see this function beeing called by using alert boxes, and it does in fact set the disabled=false. But the elements are still disabled.

Something to point out is that according to firebug, the disabled attribute looks like this:

    <input name="test" id="test" disabled="">

Note there is just two doublequotes… Shouldn’t it say “disabled=’disabled'” or “disabled=true”?

Any tips on how to troubleshoot further?

Here is how I call the function:

(category=="Cars")?disableDiv("nav_sub_cars", false):disableDiv("nav_sub_cars", true);

If you need more input, just let me know…

Thanks

Answer 1

Edited to reflect the comments.

According to the W3C the code you posted should be correct. The disabled attribute is a boolean attribute. Use of the removeAttribute() method may be helpful as well.

In my experience, you can also achieve this effect using the string values ‘disabled’ or ”. This may work because these values are coerced into a boolean representation when the browser encounters them.