单击禁用的输入或按 钮

Question

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

HTML：

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

和JavaScript：

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

以上代码对我不起作用;这不是：

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

Answer 1

无法捕获已禁用元素的单击。你最好的选择是对元素上的特定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。

Answer 2

使字段readonly可以提供帮助，因为click事件将被触发。虽然要注意differences in behaviour。

<input type="button" value="click" readonly="readonly" />

Answer 3

放

input[disabled] {pointer-events:none}

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

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

如果您需要支持旧浏览器，请检查哪些支持qazxsw poi：qazxsw poi

Answer 4

你不能没有解决方法，请参阅：pointer-events

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

编辑从链接添加上下文：

提问者发现这个帖子解释了为什么事件没有注册：http://caniuse.com/#search=pointer-events

Firefox以及其他浏览器可以禁用已禁用的表单字段上的DOM事件。从已禁用的表单字段开始的任何事件都将被完全取消，并且不会在DOM树中向上传播。如果我错了，请纠正我，但如果您单击禁用按钮，则事件源是禁用按钮，并且完全消除了单击事件。浏览器字面上不知道点击的按钮，也没有通过点击事件。就像你点击网页上的黑洞一样。

解决方法是将“看起来”按钮的样式设置为禁用，而实际上并非如此。

Answer 5

jQuery detect click on disabled submit button元素将不允许用户与它们进行交互。

所以：不，你不能把http://www.webdeveloper.com/forum/showthread.php?t=186057放在disabled按钮上并期望它发射。

Answer 6

onclick

disabled

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

Answer 7

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

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

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

Answer 8

如何将按钮包含在某个元素中并捕获单击此元素呢？

$('.btn').on('click', function(e) {
  e.preventDefault();
  $txt = $('div.text');
  if($(this).attr('disabled')){
    $txt.html('CLICKED, BUT DISABLED!!');
  }else{
    $txt.html('Not disabled. =)');
  }
});

使用Javascript：

<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>

Answer 9

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

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