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


Posted in Javascript onSeptember 23, 2016

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中按钮点击后被禁用按钮的最佳实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS前端框架关于重构的失败经验分享
Mar 17 Javascript
浅析jquery的作用与优势
Dec 02 Javascript
jquery中checkbox全选失效的解决方法
Dec 26 Javascript
jquery滚动到顶部底部代码
Apr 20 Javascript
javascript实现3D变换的立体圆圈实例
Aug 06 Javascript
总结jQuery插件开发中的一些要点
May 16 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
Nov 02 Javascript
JS实现的加减乘除四则运算计算器示例
Aug 09 Javascript
3种vue组件的书写形式
Nov 29 Javascript
angular4 JavaScript内存溢出问题
Mar 06 Javascript
微信小程序实时聊天WebSocket
Jul 05 Javascript
Node.js之readline模块的使用详解
Mar 25 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
Sep 23 #Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
Sep 23 #Javascript
jQuery easyui刷新当前tabs的方法
Sep 23 #Javascript
AngularJS通过$location获取及改变当前页面的URL
Sep 23 #Javascript
AngularJS监听路由的变化示例代码
Sep 23 #Javascript
同步异步动态引入js文件的几种方法总结
Sep 23 #Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
Sep 23 #Javascript
You might like
PHP 5.0对象模型深度探索之属性和方法
2008/03/27 PHP
ThinkPHP Mobile使用方法简明教程
2014/06/18 PHP
PHP中substr函数字符串截取用法分析
2016/01/07 PHP
jquery tools之tabs 选项卡/页签
2009/07/25 Javascript
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
2011/01/17 Javascript
Javascript实现网络监测的方法
2015/07/31 Javascript
跟我学习javascript的循环
2015/11/18 Javascript
JavaScript知识点总结(十)之this关键字
2016/05/31 Javascript
微信小程序 条件渲染详解
2016/10/09 Javascript
JavaScript实现二分查找实例代码
2017/02/22 Javascript
es6的数字处理的方法(5个)
2017/03/16 Javascript
详解angularjs的数组传参方式的简单实现
2017/07/28 Javascript
JS实现十字坐标跟随鼠标效果
2017/12/25 Javascript
node.js中fs文件系统目录操作与文件信息操作
2018/02/24 Javascript
js获取form表单中name属性的值
2019/02/27 Javascript
vue的$http的get请求要加上params操作
2020/11/12 Javascript
Vue项目利用axios请求接口下载excel
2020/11/17 Vue.js
[36:17]DOTA2上海特级锦标赛 - VGL音乐会全集
2016/03/06 DOTA
Python简单实现安全开关文件的两种方式
2016/09/19 Python
Python的SimpleHTTPServer模块用处及使用方法简介
2018/01/22 Python
简单实现python聊天程序
2018/04/01 Python
python3使用pandas获取股票数据的方法
2018/12/22 Python
浅谈Python反射 &amp; 单例模式
2019/03/21 Python
Python自动化之数据驱动让你的脚本简洁10倍【推荐】
2019/06/04 Python
浅谈pyqt5在QMainWindow中布局的问题
2019/06/21 Python
Python日志logging模块功能与用法详解
2020/04/09 Python
TensorFlow保存TensorBoard图像操作
2020/06/23 Python
小学生自我鉴定
2013/10/12 职场文书
大学新生军训感言
2014/02/25 职场文书
小学优秀辅导员事迹材料
2014/05/11 职场文书
高三毕业典礼演讲稿
2014/05/13 职场文书
家长会标语
2014/06/24 职场文书
2014年超市工作总结
2014/11/19 职场文书
2015年高校图书馆工作总结
2015/04/30 职场文书
安全伴我行主题班会
2015/08/13 职场文书
2016党员干部政治学习心得体会
2016/01/23 职场文书