输入禁用事件

显然<input>，任何事件都不会处理残疾人

有没有解决此问题的方法？

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

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

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

禁用的元素不会触发鼠标事件。大多数浏览器会将事件从禁用元素传播到DOM树，因此事件处理程序可以放在容器元素上。但是，Firefox不会表现出这种行为，当您单击禁用的元素时，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/（已更新为使用jQuery 1.7和prop代替 attr）。

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

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

输入（+脚本）应为

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

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

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

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

input[disabled] {pointer-events:none}

这将使对禁用输入的任何点击都落入父元素，您可以在其中正常捕获它们。（如果您有几个禁用的输入，则可能需要将每个输入放置在自己的单独容器中，如果它们尚未采用这种方式布置-一个额外的<span>或一个<div>-例如，只是为了轻松区分哪个禁用的输入被点击）。

不利的一面是，该技巧很遗憾不适用于不支持pointer-eventsCSS属性的旧版浏览器。（它应可从IE 11，FF v3.6，Chrome v4运行）：caniuse.com/#search=pointer-events

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

我建议一种替代方法-使用CSS：

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

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

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

实际上还有另一个问题。change仅当元素失去焦点时才触发该事件，这不是考虑disabled字段的逻辑。可能您是从另一个呼叫将数据推送到该字段中。为此，您可以使用事件“ bind”。

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

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

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

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

今天我们遇到了这样的问题，但是我们不想更改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');

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

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

类“ disabled”通过不透明度模仿禁用的元素：

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

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

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

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

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

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