html input tags in hidden div are disabled when the div is displayed

<div id="divOut" class="section" style="display:none">
    <div id="divIn" class="section" style="display:none">
        .. textboxes and dropdown
    </div>
</div>

I have divIn inside divOut. Inside divIn, i have tex开发者_C百科tboxes and dropdown.

Initially these are hidden. when i display the div.. the textboxes are visible but they are disabled in Mozilla. i cannot click with a mouse. I am using below to display the div tags.

document.getElementById("divOut").style.display ="block";
document.getElementById("divIn").style.display ="block";

I tried several ways to set the disable flag to false - didnt help. I also noticed in Firebug .. the disable flag is false. but still, the entire div section is disabled. this works on IE. but does not work on Mozilla or Chrome

have you tried removing the disabled flag entirely? Also since you mention firebug, you could also just experiment there to se what actually does the trick before you implement it in code. Change the disabled tag manually in firebug and se what happens.

Have u used "readonly" in the tag for text box and drop down. If so remove that if not needed.

If you are using the disabled keyword in the input tags. You can remove the disabled status using javascript as follows:

document.getElementById("t1").removeAttribute("disabled");

t1= id of the textbox/dropdown

Also if you want to change the value of a particular attribute, you can use

document.getElementById("t1").setAttribute("class","new_class"); where class is the attribute name and new_class is the attribute value.