Question

我在下面使用此代码禁用按钮，禁用按钮。当我鼠标悬停时，它会显示交叉的圆形图标，所以一切都很好。但是，问题是，当我点击后，在场景后面，它会调用点击操作或我们希望在未被禁用时点击的内容。

我浏览网络并没有找到任何解决方案，除了从attr改为prop。我现在要去看看，但遗憾的是它在Deb中工作得很好，而不是UAT。

请帮忙吗？

$("#IsMarriedlbl").attr("disabled", true);
$("#IsSinglelbl").attr("disabled", true);
$("#IsWidowedlbl").attr("disabled", true);
$("#Divorcedlbl").attr("disabled", true);

Answer 1

我不确定为什么但是当您单击禁用的提交按钮时，IE不会阻止事件冒泡，因此您也必须在click事件中处理它。 - 有点噩梦。

如果您在点击事件中返回false，则会阻止代码运行但仍然对用户具有禁用效果。

$('#yourClickEvent').click(function( event ) {
    var $isDisabled  = $(event.target);
    if( $isDisabled.is(':submit:disabled') ) {
        return false;
    }
});

Answer 2

我使用的是@ Much thanks to GhiOm for the original answer之前见过的答案：

旧路（1.7之前）：

$('...').attr('onclick','').unbind('click');

新方式（1.7 +）：

$('...').prop('onclick',null).off('click');

Answer 3

如果您要禁用人工点击和以编程方式生成的点击，您需要执行以下操作：

$("#IsMarriedlbl")
    .prop('disabled', 'disabled')  // Sets 'disabled' property
    .prop('onclick', null)         // Removes 'onclick' property if found
    .off('click');                 // Removes other events if found

演示

＆＃13;

$("button").on("click", function() {
    alert("clicked!");
});

$("#IsMarriedlbl")
    .prop('disabled', 'disabled')  // Sets 'disabled' property
    .prop('onclick', null)         // Removes 'onclick' property if found
    .off('click');                 // Removes other events if found

$("#IsMarriedlbl").click();
$("#IsMarriedlbl").click();
$("#IsMarriedlbl").click();

＆＃13;

<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<button id="IsMarriedlbl">Married</button>

＆＃13;

Answer 4

我不知道为什么：但是在codepen工作正常： Button disabling test

$(document).ready(function() {
  $("#button").attr("disabled", true);

  $("#button").on("click", function() {
    console.log("clicked!");
  });
});

body {
  background-color: #52DD83;
  overflow: hidden;
}
button {
  text-align: center;
}

<html>

<head>
</head>

<body>
  <button id="button">Button</button>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js" </script>
    < /body>
</html >

按钮可点击即使已禁用

4 个答案:

演示