双击禁用选择框以启用

Question

我想在双击表单时启用所有表单元素,并简化代码如下:

<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>

但是,将鼠标悬停在禁用的<select>元素上时,不会触发表单双击事件.不幸的是,"readonly"属性不适用于<select>元素.

这适用于内部应用程序,我只需要在Google Chrome上运行.

更新:

我在这方面得到了很多答案,我想我需要修改我的问题以帮助指导这个过程...... W3C规范中关于残疾人形式元素的说法是什么？...例如,似乎双击事件不会触发<input>Firefox中禁用的元素.也许它在Chrome中闪现的事实是一个错误/错位,我不能指望总是在那里.

目前,在表单上方的绝对定位的包装元素上观察双击事件似乎是最好的选择...即使我讨厌添加额外的包装元素.

Answer 1

你可以用它：

演示版

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

CSS：

.no-pointer{pointer-events:none}