jQuery 单击禁用的输入或按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16109228/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Clicking a disabled input or button
提问by e1761587
Is it possible to click on a disabled button and provide some feedback to the user?
是否可以单击禁用的按钮并向用户提供一些反馈？
HTML:
HTML：
<input type="button" value="click" disabled>
and JavaScript:
和 JavaScript：
$('input').mousedown(function(event) {
alert('CLICKED');
});
The above code is not working for me; neither is this:
上面的代码对我不起作用；这也不是：
$('input').live('click', function () {
alert('CLICKED');
});
回答by Jesse
There is no way to capture a click on disabled elements. Your best bet is to react to a specific classon the element.
无法捕获对禁用元素的点击。最好的办法是对class元素上的特定内容做出反应。
HTML Markup:
HTML 标记：
<input type="button" class="disabled" value="click" />
JavaScript code:
JavaScript 代码：
$('input').click(function (event) {
if ($(this).hasClass('disabled')) {
alert('CLICKED, BUT DISABLED!!');
} else {
alert('Not disabled. =)');
}
});
You could then use CSS styling to simulate a disabled look:
然后，您可以使用 CSS 样式来模拟禁用的外观：
.disabled
{
background-color: #DDD;
color: #999;
}
Here's a jsFiddledemonstrating its use.
这是一个jsFiddle演示它的用法。
回答by Dennis Golomazov
Making the field readonlycan help, because the click event will be fired. Though be aware of the differences in behaviour.
制作该字段readonly会有所帮助，因为将触发 click 事件。虽然要注意行为上的差异。
<input type="button" value="click" readonly="readonly" />
回答by Doin
Put
放
input[disabled] {pointer-events:none}
in your CSS (it prevents some browsers from discarding clicks on disabled inputs altogether), and capture the click on a parent element. It's a cleaner solution, IMHO, than putting a transparent overlay over the element to capture the click, and depending on circumstances may also be much easier than simply "simulating" the disabled state using CSS (since that won't prevent the input from being submitted, and also requires overriding the default browser 'disabled' style).
在您的 CSS 中（它可以防止某些浏览器完全丢弃对禁用输入的点击），并捕获对父元素的点击。恕我直言，这是一个更干净的解决方案，而不是在元素上放置一个透明的覆盖层来捕获点击，并且根据情况也可能比简单地使用 CSS“模拟”禁用状态容易得多（因为这不会阻止输入被提交，并且还需要覆盖默认的浏览器“禁用”样式）。
If you have multiple such buttons, you'll need a unique parent for each, in order to be able to distinguish which button was clicked, because with pointer-events:none, the click target is the button's parent rather than the button itself. (Or you could test the click coordinates, I suppose...).
如果您有多个这样的按钮，则每个按钮都需要一个唯一的父级，以便能够区分单击了哪个按钮，因为使用pointer-events:none，单击目标是按钮的父级而不是按钮本身。（或者你可以测试点击坐标，我想......）。
If you need to support older browsers, though, do check which ones support pointer-events: http://caniuse.com/#search=pointer-events
但是，如果您需要支持旧浏览器，请检查哪些浏览器支持pointer-events：http: //caniuse.com/#search=pointer-events
回答by Andrew Bartel
You can't without a workaround, see: jQuery detect click on disabled submit button
您不能没有解决方法，请参阅：jQuery 检测点击禁用提交按钮
The browsers disable events on disabled elements.
浏览器禁用禁用元素上的事件。
Edited to add context from link:
编辑以从链接添加上下文：
The asker found this thread with an explanation of why the events aren't registering: http://www.webdeveloper.com/forum/showthread.php?t=186057
提问者找到了这个线程，并解释了事件未注册的原因：http: //www.webdeveloper.com/forum/showthread.php?t=186057
Firefox, and perhaps other browsers, disable DOM events on form fields that are disabled. Any event that starts at the disabled form field is completely canceled and does not propagate up the DOM tree. Correct me if I'm wrong, but if you click on the disabled button, the source of the event is the disabled button and the click event is completely wiped out. The browser literally doesn't know the button got clicked, nor does it pass the click event on. It's as if you are clicking on a black hole on the web page.
Firefox，或许还有其他浏览器，会在已禁用的表单字段上禁用 DOM 事件。在禁用的表单字段开始的任何事件都被完全取消并且不会向上传播 DOM 树。如果我错了，请纠正我，但是如果您单击禁用按钮，则事件源是禁用按钮，并且单击事件将完全消失。浏览器实际上并不知道按钮被点击了，也不会传递点击事件。就好像你在点击网页上的一个黑洞。
The workaround would be style the button to "look" disabled, while not actually being so.
解决方法是将按钮设置为“看起来”禁用，而实际上并非如此。
回答by Halcyon
disabledelements will not allow the user to interact with them.
disabled元素将不允许用户与它们交互。
So: no, you can't put an onclickon a disabledbutton and expect it to fire.
所以：不，你不能把onclick一个disabled按钮放在按钮上并期望它会触发。
回答by sglazkov
you can't click on disabled button, but can click on disabled link
你不能点击禁用按钮，但可以点击禁用链接
$('.btn').on('click', function(e) {
e.preventDefault();
$txt = $('div.text');
if($(this).attr('disabled')){
$txt.html('CLICKED, BUT DISABLED!!');
}else{
$txt.html('Not disabled. =)');
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="text">No action</div>
<input type="button" href="" class="btn" value="click" />
<input type="button" href="" class="btn" value="click disabled" disabled />
<a href="" class="btn">Click</a>
<a href="" class="btn" disabled>Click Disabled</a>回答by Lisandro
<input id="idButton" type="button" value="click" disabled>
<input id="idButton" type="button" value="click" disabled>
$('#idButton').on('click', function() {
// The button is disabled but this will be executed.
});
The above example works with JQuery for disabled buttons that need the event to be captured.
上面的示例与 JQuery 一起用于需要捕获事件的禁用按钮。
回答by Gh61
What about wraping the button in some element and catching click on this element instead?
将按钮包装在某个元素中并点击该元素呢？
<span id="container">
<input type="button" value="click" disabled>
</span>
Javascript:
Javascript：
$("#container").click(function(){
alert("Element clicked!");
})
回答by jbolanos
You should used disabled="disabled" and not just disabled.
您应该使用 disabled="disabled" 而不仅仅是禁用。
$('input:disabled').val('disabled');
