javascript - 调用函数前解锁按钮

Question

我有javascript函数：

<button class="btn btn-success" type="button" id="bt_gravar" onclick="bloqueia();" style="width: 100%;">Cadastrar <i class="fas fa-check"></i></button>

function bloqueia(){
   $("#bt_gravar").attr('disabled', 'disabled');
   gravaAgenda();
   $("#bt_gravar").removeAttr('disabled');
}

gravaAgenda() 是一个 AJAX 函数

我想锁定按钮以避免用户双击。接下来的功能，解锁按钮。

但这是行不通的。我可以多次单击该按钮。

有什么想法吗？

标签： javascript

Answer 1

延迟删除 disabled 属性，直到您从 ajax fn 返回结果

<button class="btn btn-success" type="button" id="bt_gravar" style="width: 100%;">Cadastrar <i class="fas fa-check"></i></button>

$(document).ready( function() {
    $("#bt_gravar").click(function() {
       $("#this").attr('disabled', 'disabled');
       gravaAgenda();
    })
    
}
function gravaAgenda() {
  $.ajax({
    url: "test.php",
    method:'post',
    data:{}
  }).done(function() {
    $("#bt_gravar").removeAttr('disabled');
  });
}