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" attribute不适用于<select>元素。

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

更新

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

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

Answer 1

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

Answer 2

您可以使用：

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}

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并查看）。

双击禁用选择框以启用

3 个答案: