禁用按钮仍然监听点击事件

Question

我在进行一些 jquery 验证的表单中遇到问题。 如果未填写特定输入字段，则应通过添加禁用属性来禁用“向前”按钮：

if errors
  $('.btn-move-forward').attr("disabled", true)

这有效，但我在那个按钮上也有一个点击事件：（coffeescript）

$('.btn-move-forward').click ->
  $('#step2, #step3').toggle()

我希望.btn-move-forward在按钮被禁用时不会触发点击事件，但确实如此！

首先：我不明白为什么，因为每个浏览器规范都定义不应该发生这种情况。 无论如何，我试图通过执行以下操作来绕过它：

$('.btn-move-forward').click ->
  if !$(this).is(:disabled)
    $('#step2, #step3').toggle()

或这个

$('.btn-move-forward').click ->
  if $(this).prop("disabled", false)
    $('#step2, #step3').toggle()

或像这样组合事件侦听器：

$('.btn-move-forward').on 'click', '.btn-move-forward:enabled', ->
   $('#step2, #step3').toggle()

不，所有这些都无法正常工作。 该按钮仍充当前进按钮。

我想要的只是按钮不听onclick如果它被禁用。

Answer 1

disabled属性仅适用于表单元素。 这意味着除非.btn-move-forward元素是<button>或<input type="button">否则disabled属性将无效。

您可以在此处查看使用button的工作示例：

 $('.btn-move-forward').prop("disabled", true).click(function() { console.log('Moving forward...'); })

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <button class="btn-move-forward">Move forward</button>

Answer 2

将其更改为使用prop() 。

$('.btn-move-forward').prop("disabled", true)

Answer 3

请关闭点击事件

$('.btn-move-forward').off('click');

Answer 4

禁用：

$('.btn-move-forward').prop("disabled", true);

重新启用：

$('.btn-move-forward').removeClass('disabled'); // do this also.
$('.btn-move-forward').prop("disabled", false);

Answer 5

我认为，禁用click事件不是一个好主意。 因为你必须再次启用click事件，如果你启用按钮。

对于disabled button ，我只check disabled state ，如果disabled return 。

---

html按钮：

<span class="btn btn-sm btn-primary btn-move-forward">Book</span>

---

如何禁用按钮：

$('.btn-move-forward').addClass('disabled');

---

点击事件：

$('.btn-move-forward').on('click', function(){
  if($(this).hasClass('disabled')) { 
    console.log('-- Button is disabled. Return from here. --');
    return false;
  }

  // write code for click event here
  $('#step2, #step3').toggle()
});

Answer 6

使用指针事件：无； 不需要点击事件的地方

.btn[disabled]{pointer-events:none;}

 document.querySelectorAll(".btn").forEach(btn=>{ btn.addEventListener("click", e=>{ alert(e.target.innerText) }) })

 .btn{ display:inline-block; background: #3f51b5; color: #fff; box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12); border: none; border-radius: 2px; position: relative; height: 36px; margin: 10px; min-width: 64px; padding: 0 16px; display: inline-block; font-family: "Roboto","Helvetica","Arial",sans-serif; font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 0; overflow: hidden; will-change: box-shadow; transition: box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1); outline: none; cursor: pointer; text-decoration: none; text-align: center; line-height: 36px; vertical-align: middle; } .btn[disabled]{pointer-events:none; opacity:0.5}

 <div class="btn">Clickable button</div> <div class="btn">Clickable 2 button</div> <div class="btn">Clickable 3 button</div> <hr /> <div class="btn" disabled>Disabled button</div> <div class="btn" disabled>Disabled 2 button</div> <div class="btn" disabled>Disabled 3 button</div>

Answer 7

你可以尝试一个几乎标签的属性：onclick="return false"

Answer 8

我已经晚了太多年了：P 如果有人能从我的回答中得到帮助：HTML：

<button type="button" id="verifyBtn" class="disabled" onClick="submitForm(this);"></button>

JS：

• 启用

  $j('#verifyBtn').addClass('disabled');

  $j('#verifyBtn').attr('disabled','disabled');

• 禁用

  $j('#verifyBtn').removeClass('disabled');

  $j('#verifyBtn').removeAttr('disabled','disabled');

Answer 9

这是为我工作的代码！！！ 当 btn disabled 有一个真正的点击不起作用时，当 btn disabled 有一个错误的点击事件工作

//disabled btn in windows load or in desigen
$('#btnEdit').attr("disabled", true);
//in click function write this code
$('#btnEdit').click(function () {
        var isDisabled = $('#btnEdit').attr('disabled');
        if (!isDisabled) {
        //Write code here
        }
    });