禁用多次单击按钮

Question

I am trying to disable multiple click on a button. The code is as below

<div class="pull-right"> 
  <input type="button" name="Submit" class="btn btn-success" id="anext" value='<s:text name="generic.next.caps"></s:text>' onclick='showPopUp();'/>
</div>

<div class="pull-right">
  <s:submit type="submit" name="Submit" cssClass="btn btn-success" id="acontd" value="%{getText('generic.continue.caps')}" action="ActionName"/>
</div>

My solution:

$("anext").click(function(){
    $("aptcnext").prop("disabled", true);
});
$("acontd").click(function(){
    $("aptccontd").prop("disabled", true);
});

However, this is not working. Could anyone help me this?

Answer 1

Try this instead

 $("input[type='submit']").click(function() { $(this).prop("disabled", true); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="pull-right"> <input type="submit" name="Submit" class="btn btn-success" id="anext" onclick='showPopUp();' /> </div> <div class="pull-right"> <input type="submit" name="Submit" class="btn btn-success" id="acontd" action="ActionName" /> </div> 

Answer 2

You can use one method to accept the click event only one time

 $(function () { $("#anext").one('click', function(e){ alert('ok'); }); $("#acontd").one('click', function(){ alert('ok'); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="pull-right"> <input type="submit" name="Submit" class="btn btn-success" id="anext" onclick='showPopUp();' /> </div> <div class="pull-right"> <input type="submit" name="Submit" cssClass="btn btn-success" id="acontd" action="ActionName" /> </div> 

Answer 3

  $('#disable').on('click', function(){ $('#disable').attr("disabled", true); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="disable">Disable Me!</button> <p>Hello</p>