禁用输入上的事件

Question

显然，任何事件都不会处理禁用的<input>

有没有办法解决这个问题？

<input type="text" disabled="disabled" name="test" value="test" />

$(':input').click(function () {
    $(this).removeAttr('disabled');
})

在这里，我需要单击输入以启用它。 但是，如果我不激活它，则不应发布输入。

Answer 1

禁用的元素不会触发鼠标事件。 大多数浏览器会将源自禁用元素的事件沿 DOM 树向上传播，因此事件处理程序可以放置在容器元素上。 但是，Firefox 不会表现出这种行为，当您单击禁用的元素时，它什么也不做。

我想不出更好的解决方案，但是为了完全跨浏览器兼容性，您可以在禁用输入的前面放置一个元素，然后点击该元素。 这是我的意思的一个例子：

<div style="display:inline-block; position:relative;">
  <input type="text" disabled />
  <div style="position:absolute; left:0; right:0; top:0; bottom:0;"></div>
</div>​

jq：

$("div > div").click(function (evt) {
    $(this).hide().prev("input[disabled]").prop("disabled", false).focus();
});​

示例： http : //jsfiddle.net/RXqAm/170/ （更新为使用带有prop而不是attr jQuery 1.7）。

Answer 2

也许您可以将该字段设为只读并在提交时禁用所有只读字段

$(".myform").submit(function(e) {
  $("input[readonly]").prop("disabled", true);
});

并且输入（+脚本）应该是

<input type="text" readonly="readonly" name="test" value="test" />

$('input[readonly]').click(function () {
  $(this).removeAttr('readonly');
});

一个活生生的例子：

 $(".myform").submit(function(e) { $("input[readonly]").prop("disabled", true); e.preventDefault(); }); $('.reset').click(function () { $("input[readonly]").prop("disabled", false); }) $('input[readonly]').click(function () { $(this).removeAttr('readonly'); })

 input[readonly] { color: gray; border-color: currentColor; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form class="myform"> <input readonly="readonly" value="test" /> <input readonly="readonly" value="test" /> <input readonly="readonly" value="test" /> <input readonly="readonly" value="test" /> <input readonly="readonly" value="test" /> <input readonly="readonly" value="test" /> <input readonly="readonly" value="test" /> <input readonly="readonly" value="test" /> <input readonly="readonly" value="test" /> <button>Submit</button> <button class="reset" type="button">Reset</button> </form>

Answer 3

禁用元素在某些浏览器中“吃掉”点击——它们既不响应它们，也不允许它们被元素或其任何容器上的任何位置的事件处理程序捕获。

恕我直言，“修复”此问题的最简单、最干净的方法（如果您确实需要像 OP 那样捕获对禁用元素的点击）只是将以下 CSS 添加到您的页面：

input[disabled] {pointer-events:none}

这将使对禁用输入的任何点击都落入父元素，在那里您可以正常捕获它们。 （如果您有多个禁用的输入，您可能希望将每个输入放入一个单独的容器中，如果它们还没有这样布置 - 一个额外的<span>或一个<div> ，比如说 - 只是为了使它易于区分单击了哪个禁用的输入）。

---

缺点是不幸的是，这个技巧不适用于不支持pointer-events CSS 属性的旧浏览器。 （它应该适用于 IE 11、FF v3.6 、Chrome v4）： caniuse.com/#search=pointer-events

如果您需要支持较旧的浏览器，则需要使用其他答案之一！

Answer 4

我会建议一个替代方案 - 使用 CSS：

input.disabled {
    user-select : none;
    -moz-user-select : none;
    -webkit-user-select : none;
    color: gray;
    cursor: pointer;
}

而不是禁用属性。 然后，您可以添加自己的 CSS 属性来模拟禁用的输入，但具有更多控制权。

Answer 5

 $(function() { $("input:disabled").closest("div").click(function() { $(this).find("input:disabled").attr("disabled", false).focus(); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <div> <input type="text" disabled /> </div>

Answer 6

您可以考虑使用readonly而不是disabled 。 使用一些额外的 CSS，您可以设置输入的样式，使其看起来像一个disabled字段。

其实还有一个问题。 事件change仅在元素失去焦点时触发，考虑到disabled字段，这不是逻辑。 可能您正在将数据从另一个调用推送到该字段。 要完成这项工作，您可以使用事件“绑定”。

$('form').bind('change', 'input', function () {
    console.log('Do your thing.');
});

Answer 7

或者用 jQuery 和 CSS 做到这一点！

$('input.disabled').attr('ignore','true').css({
    'pointer-events':'none',
     'color': 'gray'
});

通过这种方式，您可以使元素看起来被禁用并且不会触发指针事件，但它允许传播，如果提交，您可以使用属性“忽略”来忽略它。

Answer 8

我们今天遇到了这样的问题，但我们不想更改 HTML。 所以我们使用mouseenter事件来实现

var doThingsOnClick = function() {
    // your click function here
};

$(document).on({
    'mouseenter': function () {
        $(this).removeAttr('disabled').bind('click', doThingsOnClick);
    },
    'mouseleave': function () {
        $(this).unbind('click', doThingsOnClick).attr('disabled', 'disabled');
    },
}, 'input.disabled');

Answer 9

我做了一些与 Andy E 非常相似的事情； 除了我使用了周围的标签。 但是，我需要“名称”，因此我将其更改为没有“href”的标签。

Answer 10

您没有理由不能使用 CSS 和readonly的组合来模拟disabled属性：

 Faux-Disabled: <input type="text" id="start-on" value="1" readonly="" style="background-color:#F6F6F6;"><br> Real-Disabled: <input type="text" readonly="" disabled="true" value="1"></input>

注意：这不会在<form>具有disabled的常规行为，这会阻止服务器看到该字段。 这是以防万一您想禁用与服务器端无关的字段。

Answer 11

我找到了另一个解决方案：

<input type="text" class="disabled" name="test" value="test" />

“禁用”类通过不透明度模拟禁用元素：

<style type="text/css">
    input.disabled {
        opacity: 0.5;
    }
</style>

如果元素被禁用并删除类，则取消事件：

$(document).on('click','input.disabled',function(event) {
    event.preventDefault();
    $(this).removeClass('disabled');
});

Answer 12

这里的建议看起来也很适合这个问题

在禁用的元素上执行单击事件？ Javascript jQuery

jQuery('input#submit').click(function(e) {
    if ( something ) {        
        return false;
    } 
});