当按钮被禁用时，点击事件调用

Question

once the button clicked I have a disabled button and on page load, I get the status of the button and then enable and disable the button according to requirement.it's work properly but I give an on-click event to the button. when the button is disabled then also when I click the button javascript call a method.

i have tag as a button. how I can handle when button is disabled raise event stop.

thank you in advance.

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

Answer 1

Try this:

 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>

Answer 2

try this:

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

or you can try adding a css class on click that disables the button:

.disabled {
    pointer-events: none;
}

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