javascript - Remove disabled attribute onClick of disabled form field

Question

I have a form field that starts out disabled and has an onClick to enable it. The onClick doesn't fire (at least in FF) nor does a simple alert(1);.

The hacky version is to show a fake form field in its place that "looks" like it's disabled (grayed out style) and onClick, hide it and show the correct field enabled, but that's ugly.

Example Code

This works:

<input type="text" id="date_end" value="blah" onClick="this.disabled=true;">

This works:

<label for="date_end_off" onClick="document.getElementById('date_end').disabled=false">Test</label>
<input type="text" id="date_end" value="blah" onClick="alert(1);" disabled>

This fails:

<input type="text" id="date_end" value="blah" onClick="alert(1);" disabled>

This fails:

<input type="text" id="date_end" value="blah" onClick="document.getElementById('date_end').disabled=false" disabled>

Answer 1

I came across this thread in another forum so I assume I'll have to go about it a different way.

http://www.webdeveloper.com/forum/showthread.php?t=186057

Firefox, and perhaps other browsers, disable DOM events on form fields that are disabled. Any event that starts at the disabled form field is completely canceled and does not propagate up the DOM tree. Correct me if I'm wrong, but if you click on the disabled button, the source of the event is the disabled button and the click event is completely wiped out. The browser literally doesn't know the button got clicked, nor does it pass the click event on. It's as if you are clicking on a black hole on the web page.

Work around:

1. Style the date fields to look as if they are disabled.
2. Make a hidden "use_date" form field with a bit value to determine whether to use the date fields during processing.
3. Add new function to onClick of the date fields which will change the style class to appear enabled and set the "use_date" value to 1.