当按钮被禁用然后点击事件调用

Posted 2023-05-09

【中文标题】当按钮被禁用然后点击事件调用

【英文标题】：when button is disable then also on click event call

【发布时间】：2021-03-03 16:31:49

【问题描述】：

单击按钮后，我有一个禁用的按钮，在页面加载时，我会获取按钮的状态，然后根据要求启用和禁用按钮。它工作正常，但我给按钮一个点击事件。当按钮被禁用时，当我单击按钮时，javascript调用一个方法。

我有标签作为按钮。 当按钮被禁用引发事件停止时我该如何处理。

提前谢谢你。

<a id="check_status_api" class="btn btn-info btn-sm" href="javascript:void(0)">run_batch</a>

$("#check_status_api").click(function(e)
  console.log('my ajax call code ')
)

$(document).ready(function()
  //on page load get status of my batch if it's running then button disable property add 
    if ('runnig' == 'runnig')
      $("#check_status_api").attr( "disabled", "disabled" );
    
    
)

【问题讨论】：

您不能以这种方式使用disabled 属性，因为禁用的元素不会引发任何事件。

链接被禁用，然后元素引发事件。 @RoryMcCrossan

【参考方案1】：

试试这个：

$("btn btn-info btn-sm").prop('disabled', true);

或者您可以尝试在单击时添加一个 css 类来禁用按钮：

.disabled 
    pointer-events: none;

或document.getElementById("check_status_api").disabled = true;

【讨论】：

我有 标签作为按钮，所以这不适用于 标签 $('#check_status_api').is('[disabled=disabled]') 这对我有用。谢谢。

【参考方案2】：

试试这个：

const myBtn = $('#check_status_api')

myBtn.click(function(e)
    if (!myBtn.is('[disabled=disabled]')) 
        console.log('my ajax call code ')
  
)

$(document).ready(function()
  //on page load get status of my batch if it's running then button disable property add 
    if ('runnig' == 'runnig')
      myBtn.attr( "disabled", "disabled" );
    
)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<a id="check_status_api" class="btn btn-info btn-sm" href="javascript:void(0)">run_batch</a>

【讨论】：

我有 标签而不是按钮，所以它不起作用

我为 标签找到了一种解决方案，将 !myBtn.is(':disabled') 替换为 !$('#check_status_api').is('[disabled=disabled]') 它对我有用。