Bootstrap中點選後禁用按鈕的最佳方法
阿新 • • 發佈:2018-12-22
防止在Bootstrap中點選按鈕多次提交,點選按鈕後禁用按鈕。
具體實現方法如下:
//禁用button
$('button').addClass('disabled'); // Disables visually
$('button').prop('disabled', true); // Disables visually + functionally
//禁用型別為button的input按鈕
$('input[type=button]').addClass('disabled'); // Disables visually
$('input[type=button]').prop('disabled' , true); // Disables visually + functionally
//禁用超連結
$('a').addClass('disabled'); // Disables visually
$('a').prop('disabled', true); // Does nothing
$('a').attr('disabled', 'disabled'); // Disables visually
將上面方法寫入點選事件中即可,如:
$(".btn-check").click(function () {
$('button').addClass('disabled' ); // Disables visually
$('button').prop('disabled', true); // Disables visually + functionally
});
js按鈕點選後幾秒內不可用
function timer(time) {
var btn = $("#sendButton");
btn.attr("disabled", true); //按鈕禁止點選
btn.val(time <= 0 ? "傳送動態密碼" : ("" + (time) + "秒後可傳送"));
var hander = setInterval(function () {
if (time <= 0) {
clearInterval(hander); //清除倒計時
btn.val("傳送動態密碼");
btn.attr("disabled", false);
return false;
}else {
btn.val("" + (time--) + "秒後可傳送");
}
}, 1000);
}
//呼叫方法
timer(30);