禁用多個點擊按鈕

Question

我想禁用多個點擊按鈕。代碼如下

<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> 

我的解決辦法：

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

但是，這是行不通的。任何人都可以幫助我嗎？

Answer 1

試試這個

$("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

您可以使用one方法接受單擊事件只有一次

$(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>