如何防止 HTML 按钮被双击？

Question

<div id="spanCheckout" class="checkout-section clearfix"> <a href="view_cart.asp" class="btn btn-link"><i class="icon-left"></i> Return to Cart</a> <div class="pull-right"> <button type="button" onclick="doCheckout(this.form,'checkoutButton');" class="btn btn-lg btn-primary"><i class="icon-basket"></i> [checkout3_submitbutton]</button> </div>

晚上好，我们最近开始在我们的电子商务网站上看到大量重复收费，原因是结账时双击按钮。 有人可以帮助提供禁用和可能在第一次单击后将 Checkout 按钮灰显以防止发生这种情况所需的代码吗？

预先感谢您的帮助！

Answer 1

你可以这样做：

<button onclick="handleCheckout()">Checkout</button>

Javascript：

let canCheckout = true;

function handleCheckout(){
  if(canCheckout){
    canCheckout = false;

    // Procced to checkout ...
  }
}

当有人第一次点击按钮时，他会将布尔状态更改为 false，从而防止代码多次执行。