禁用输入上的事件

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

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

恕我直言，“修复”此问题的最简单、最干净的方法（如果您确实需要像 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 3

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

$(".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 4

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

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

而不是 disabled 属性。然后，您可以添加自己的 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" value="1" readonly="1" style="background-color:#F6F6F6;"><br>

Real-Disabled: <input type="text" disabled="true" value="1"></input>

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

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

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

Performing click event on a disabled element? Javascript jQuery

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