Double click disabled select box to enable

Question

I'm trying to enable all form elements on double click of the form, and have simplified code as follows:

<form>
    <input type="text" name="foo" disabled />
    <select name="bar" disabled>
        <option>a</option>
        <option>b</option>
    </select>
</form>

<script type="text/javascript">
    $(function() {
        $('form').dblclick(function() {
            $(this).find('input,select').removeAttr('disabled');
        });
    });
</script>

However, the form double click event does not fire while hovering over the disabled <select> element. And unfortunately, the "readonly" attribute does not work on <select> elements.

This is for an internal application, and I only need it function on Google Chrome.

UPDATE:

I'm getting a bunch of answers on this, and I think I need to revise my question to help guide the process... What does the W3C spec on disabled form elements say?... It appears the double click event doesn't fire on disabled <input> elements in Firefox for example. Perhaps the fact that it fires in Chrome is a bug/misalignment w/ spec that I can't count on always being there.

At the moment, watching for the double click event on an absolutely positioned wrapper element above the form seems like the best option... even though I hate adding extra wrapper elements.

Answer 1

I would suggest putting a div overlaying the entire form, and place the click handler on that. Disabled fields do not fire click handlers.

Answer 2

You could use that:

DEMO

$(function () {    
    $('form').dblclick(function () {
        $(this).find('input,select').removeProp('disabled').removeClass('no-pointer');
    }).find(':input').addClass('no-pointer');
});

CSS:

.no-pointer{pointer-events:none}