BootStrap中按鈕點(diǎn)擊后被禁用按鈕的最佳實(shí)現(xiàn)方法
更新時(shí)間：2016年09月23日 11:43:29 投稿：mrr
在項(xiàng)目開(kāi)發(fā)中經(jīng)常會(huì)遇到這樣的功能，為了防止在Bootstrap中點(diǎn)擊按鈕多次提交，所以希望點(diǎn)擊按鈕后禁用按鈕。怎么實(shí)現(xiàn)此功能呢？今天腳本之家小編給大家分享BootStrap中按鈕點(diǎn)擊后被禁用按鈕的最佳實(shí)現(xiàn)方法，非常不錯(cuò)，感興趣的朋友參考下吧
Bootstrap中點(diǎn)擊后禁用按鈕與js有什么區(qū)別呢要如何來(lái)實(shí)現(xiàn)呢，今天我們就一起來(lái)看一篇關(guān)于Bootstrap中點(diǎn)擊后禁用按鈕的最佳方法，具體的例子如下所示．
為了防止在Bootstrap中點(diǎn)擊按鈕多次提交，所以希望點(diǎn)擊按鈕后禁用按鈕。
具體實(shí)現(xiàn)方法如下:
//禁用button
$('button').addClass('disabled'); // Disables visually
$('button').prop('disabled', true); // Disables visually + functionally
//禁用類(lèi)型為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
將上面方法寫(xiě)入點(diǎn)擊事件中即可，如：
$(".btn-check").click(function () {
$('button').addClass('disabled'); // Disables visually
$('button').prop('disabled', true); // Disables visually + functionally
});
js按鈕點(diǎn)擊后幾秒內(nèi)不可用:
function timer(time) {
var btn = $("#sendButton");
btn.attr("disabled", true); //按鈕禁止點(diǎn)擊
btn.val(time <= 0 ? "發(fā)送動(dòng)態(tài)密碼" : ("" + (time) + "秒后可發(fā)送"));
var hander = setInterval(function() {
if (time <= 0) {
clearInterval(hander); //清除倒計(jì)時(shí)
btn.val("發(fā)送動(dòng)態(tài)密碼");
btn.attr("disabled", false);
return false;
}else {
btn.val("" + (time--) + "秒后可發(fā)送");
}
}, 1000);
}
//調(diào)用方法
timer(30);
以上所述是小編給大家介紹的BootStrap中按鈕點(diǎn)擊后被禁用按鈕的最佳實(shí)現(xiàn)方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
jQuery底層AJAX實(shí)現(xiàn)，其返回其創(chuàng)建的XMLHttpRequest對(duì)象，大多數(shù)情況下無(wú)需直接操作該函數(shù)，除非需要操作不常用的選項(xiàng)，以獲得更多的靈活性，這篇文章給大家介紹JQuery AJAX操作代碼，感興趣的朋友一起看看吧2022-12-12
使用Ajax和Jquery配合數(shù)據(jù)庫(kù)實(shí)現(xiàn)下拉框的二級(jí)聯(lián)動(dòng)的示例
下面小編就為大家分享一篇使用Ajax和Jquery配合數(shù)據(jù)庫(kù)實(shí)現(xiàn)下拉框的二級(jí)聯(lián)動(dòng)的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
jQuery 使用手冊(cè)，大家可以耐心的看完，就基本上入門(mén)了。2009-09-09
最近我們網(wǎng)站做一個(gè)合作項(xiàng)目要求在頁(yè)面中捕捉回車(chē)事件，經(jīng)過(guò)好多測(cè)試找到這個(gè)2010-06-06
老生常談jquery id選擇器和class選擇器的區(qū)別
下面小編就為大家?guī)?lái)一篇老生常談jquery id選擇器和class選擇器的區(qū)別。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
本文是基于jquery代碼實(shí)現(xiàn)的添加和刪除輸入文本框標(biāo)簽代碼，非常不錯(cuò)，具有參考借鑒，需要的朋友一起看下吧2016-05-05
JavaScript和JQuery實(shí)用代碼片段（一）
JavaScript和JQuery實(shí)用代碼片段，喜歡學(xué)習(xí)jquery的朋友可以參考下。2010-04-04
jQuery實(shí)現(xiàn)的簡(jiǎn)單拖動(dòng)層示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡(jiǎn)單拖動(dòng)層,可實(shí)現(xiàn)響應(yīng)鼠標(biāo)拖動(dòng)div層及動(dòng)態(tài)顯示坐標(biāo)值的功能,涉及jQuery鼠標(biāo)響應(yīng)及頁(yè)面元素屬性相關(guān)操作技巧,需要的朋友可以參考下2017-02-02
這篇文章主要為大家詳細(xì)介紹了jquery橫向縱向鼠標(biāo)滾輪全屏切換效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
jQuery Password Validation密碼驗(yàn)證
這篇文章主要介紹了jQuery Password Validation密碼驗(yàn)證的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12