FireFox handling of disabled fields

Question

I have an HTML form with a select list and a radio button, both of which are initially set with disabled = true. At some point, these elements are enabled via JavaScript (i.e., disabled = false). This works fine in IE and Chrome, but in FireFox the element remains disabled. It appears to be enabled, but doesn't respond to mouse clicks. When I inspect one of the elements using FireBug, the disabled attribute is false. Are there known issues with FireFox when dealing with form elements that are initially disabled, then enabled?

Thanks.

Answer 1

Works for me:

<select id="a" disabled="true">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>

<script type='text/javascript'>
document.getElementById('a').disabled=false
</script>

Answer 2

I've been grappling with the same issue. I'm still testing but found wrapping the form element in a span/div tag and attaching onclick to the span/div (with padding) seems to work. The only remaining issue is to set the z-index to overlay the input and change it after click so it's underneath the form input (not sure if that's possible - I don't like reading docs).

    function edit(ID) {
     // need to add previous field code and set disabled to true
      document.getElementById(ID).disabled=false
      document.getElementById(ID).focus();
    }

//Begin Body Code

<form name="theform"><table><tr><td><span style="padding:5px;border:1px solid black;" onclick="edit('myId1');"><input  onclick="edit();"   disabled id="myId1" type="text"" value="Value One" /></span></td></tr></form>

//End Body Code

Answer 3

I've always used...

document.getElementById(ID).disabled="disabled"

...and...

document.getElementById(ID).disabled=""

...instead of true/false. Have you tried that?

Answer 4

I was able to resolve this issue by using jQuery to set and remove the disabled attribute rather than setting it directly. I'm not sure what it does under the hood to make it work.

$(control).attr('disabled', 'disabled');
$(control).removeAttr('disabled');

Answer 5

After breaking my head over for 4 hours, here is what worked for me:

document.getElementById(ID).disabled = true|false; // this works only in IE document.getElementbyId(ID).setAttribute('disabled', true|false); // This works both in IE\FF

-nitin (MSFT)