事件

禁用元素不会触发鼠标事件。大多数浏览器会将源自被禁用元素的事件传播到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>​

金桥:

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

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

在禁用元素上执行单击事件?Javascript jQuery < / >

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

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

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

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

或者用jQuery和CSS做这个!

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

这样你可以让元素看起来是禁用的，没有指针事件会被触发，但它允许传播，如果提交，你可以使用属性'ignore'来忽略它。

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

恕我直言，最简单、最干净的“修复”这个问题的方法(如果你确实需要像OP那样捕捉禁用元素的点击)就是向你的页面添加以下CSS:

input[disabled] {pointer-events:none}

这将使对禁用输入的任何单击都传递到父元素，在父元素中您可以正常捕获它们。(如果你有几个禁用的输入，你可能想要把每个输入放到一个单独的容器中，如果它们还没有那样布局的话——比如一个额外的<span>或<div>——只是为了容易区分哪个禁用的输入被点击了)。

不幸的是，这个技巧不适用于不支持pointer-events CSS属性的旧浏览器。(它应该从IE 11, FF v3.6, Chrome v4工作):搜索= pointer-events caniuse.com/ #

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

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

<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');
});

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

实际上还有另一个问题。事件change仅在元素失去焦点时触发，考虑到disabled字段，这不是逻辑。可能您正在将数据从另一个调用推入该字段。要做到这一点，你可以使用事件'bind'。

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

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

我做了和Andy E非常相似的事情;只是我用了一个环绕标签。然而，我需要“名称”，所以我把它改成了一个没有“href”的标签。

没有理由不能使用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>中的常规行为，这会阻止服务器看到该字段。这只是为了防止您想要禁用服务器端无关紧要的字段。