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

Use readonly instead of disabled

For checkboxes at least, this makes them look disabled but behave normally (tested on Google Chrome). You'll have to catch the click and prevent the default action of the event as appropriate.

Answer 2

I recently had a very similar problem and solved it by placing the input in a div and moving the onClick to the div.

<div onClick="myEnableFunction('date_end');">
<input type="text" id="date_end" value="blah" disabled>
</div>