BootStrap中按钮点击后被禁用按钮的最佳实现方法


Bootstrap中点击后禁用按钮与js有什么区别呢要如何来实现呢,今天我们就一起来看一篇关于Bootstrap中点击后禁用按钮的最佳方法,具体的例子如下所示.

为了防止在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); 

以上所述是小编给大家介绍的BootStrap中按钮点击后被禁用按钮的最佳实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对积木网网站的支持!

jQuery实现边框动态效果的实例代码
话不多说、静态效果图如下实代码如下!DOCTYPEhtmlhtmlheadmetacharset="UTF-8"title/titlestyle.myDiv{width:300px;height:200px;border:1pxsolidrgba(0,0,0,0.2);margin:50px;position:relative;}

Bootstrap中点击按钮后变灰并显示加载中实例代码
Bootstrap插件非常的好用了,我们今天一起来看一篇关于Bootstrap实现点击按钮之后按钮变成不可点击的一个效果了,具体的如下所示.1.在按钮中加入data-l

jQuery.uploadify文件上传组件实例讲解
1、jquery.uploadify简介在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好,无刷新,带