禁用按钮仍侦听单击事件

Disabled button still listens to click event

本文关键字：单击 事件 按钮      更新时间：2023-09-26

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

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

这有效，但我在该按钮上也有一个单击事件：(咖啡脚本(

$('.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如果它被禁用。

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>

将其更改为改用prop()。

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

请关闭点击事件

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

禁用： 

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

要重新启用：

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

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

我认为

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

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

网页按钮：

<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()
});

使用 pointer-events：none;在不需要的地方 点击事件

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

我太晚了太多年: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');

这对我来说是代码工作!!当 BTN 禁用时，真点击不起作用，当 BTN 禁用时，错误点击事件有效

//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
        }
    });
相关文章：