html - 双击禁用选择框启用

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>但是，将鼠标悬停在禁用元素上时不会触发表单双击事件。不幸的是，“只读”属性不适用于<select>元素。

这是一个内部应用程序，我只需要它在谷歌浏览器上运行。

更新：

我得到了一堆关于这个的答案，我想我需要修改我的问题来帮助指导这个过程...... W3C 关于禁用表单元素的规范是怎么说的？...例如，双击事件似乎不会<input>在 Firefox 中的禁用元素上触发。也许它在 Chrome 中触发的事实是一个错误/未对齐的规范，我不能指望它总是在那里。

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

Answer 1

我建议放置一个div覆盖整个表单，并将点击处理程序放在上面。禁用的字段不会触发点击处理程序。

Answer 2

你可以使用它：

演示

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

CSS：

.no-pointer{pointer-events:none}

Answer 3

尝试这个：

HTML：

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

jQuery：

$('#wrapper').dblclick(function() {
    $('form').find('input, select').prop('disabled', false);
});

现场演示：

http://jsfiddle.net/oscarj24/TvBR6/3/

（只需双击红色 div 并查看）。