33

是否可以单击禁用的按钮并向用户提供一些反馈?

HTML:

<input type="button" value="click" disabled>

和 JavaScript:

$('input').mousedown(function(event) {
    alert('CLICKED');
});

上面的代码对我不起作用;这也不是:

$('input').live('click', function () {
    alert('CLICKED');
});
4

9 回答 9

31

无法捕获对禁用元素的点击。你最好的选择是对class元素的特定做出反应。

HTML 标记:

<input type="button" class="disabled" value="click" />

JavaScript 代码:

$('input').click(function (event) {
    if ($(this).hasClass('disabled')) {
        alert('CLICKED, BUT DISABLED!!');
    } else {
        alert('Not disabled. =)');
    }
});

然后,您可以使用 CSS 样式来模拟禁用的外观:

.disabled
{
    background-color: #DDD;
    color: #999;
}

这是一个jsFiddle演示它的用法。

于 2013-04-19T16:32:31.297 回答
22

制作该字段readonly会有所帮助,因为单击事件将被触发。虽然要注意行为上的差异

<input type="button" value="click" readonly="readonly" />
于 2013-11-12T09:54:56.650 回答
15

input[disabled] {pointer-events:none}

在您的 CSS 中(它可以防止某些浏览器完全放弃对禁用输入的点击),并捕获对父元素的点击。恕我直言,这是一个更干净的解决方案,而不是在元素上放置透明覆盖以捕获点击,并且根据情况也可能比使用 CSS 简单地“模拟”禁用状态要容易得多(因为这不会阻止输入已提交,并且还需要覆盖默认浏览器的“禁用”样式)。

如果您有多个这样的按钮,则每个按钮都需要一个唯一的父级,以便能够区分单击了哪个按钮,因为使用pointer-events:none,单击目标是按钮的父级而不是按钮本身。(或者你可以测试点击坐标,我想......)。

但是,如果您需要支持较旧的浏览器,请检查哪些浏览器支持pointer-eventshttp ://caniuse.com/#search=pointer-events

于 2015-08-17T20:26:28.030 回答
4

您不能没有解决方法,请参阅:jQuery detect click on disabled submit button

浏览器禁用禁用元素上的事件。

编辑以从链接添加上下文:

提问者发现了这个线程,并解释了为什么事件没有注册:http ://www.webdeveloper.com/forum/showthread.php?t=186057

Firefox,也许还有其他浏览器,禁用表单字段上的 DOM 事件。从禁用的表单字段开始的任何事件都将被完全取消,并且不会向上传播 DOM 树。如果我错了,请纠正我,但是如果您单击禁用的按钮,则事件的来源是禁用的按钮,并且单击事件完全消失了。浏览器实际上不知道按钮被点击,也不会传递点击事件。就好像你在点击网页上的一个黑洞。

解决方法是将按钮设置为“看起来”禁用,但实际上并非如此。

于 2013-04-19T16:29:58.317 回答
2

disabled元素将不允许用户与它们交互。

所以:不,你不能把一个按钮onclick放在一个disabled按钮上并期望它会触发。

于 2013-04-19T16:27:55.077 回答
0

<input id="idButton" type="button" value="click" disabled>

$('#idButton').on('click', function() {
    // The button is disabled but this will be executed.
});

上面的示例适用于需要捕获事件的禁用按钮的 JQuery。

于 2015-05-01T13:40:32.873 回答
0

你不能点击禁用的按钮,但可以点击禁用的链接

$('.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>

于 2016-02-09T22:44:57.273 回答
-1

将按钮包装在某个元素中并捕获单击该元素怎么样?

<span id="container">
    <input type="button" value="click" disabled>
</span>

Javascript:

$("#container").click(function(){
    alert("Element clicked!");
})
于 2018-02-14T14:24:01.390 回答
-3

您应该使用 disabled="disabled" 而不仅仅是禁用。

$('input:disabled').val('disabled');
于 2013-04-19T16:31:18.587 回答