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 相关文章推荐
jquery实现每个数字上都带进度条的幻灯片
Feb 20 Javascript
angularjs自定义ng-model标签的属性
Jan 21 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
Mar 19 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
Aug 20 Javascript
javascript读取文本节点方法小结
Dec 15 Javascript
微信小程序 传值取值的几种方法总结
Jan 16 Javascript
jquery+css实现侧边导航栏效果
Jun 12 jQuery
Javacript中自定义的map.js  的方法
Nov 26 Javascript
vue轮播图插件vue-awesome-swiper
Nov 27 Javascript
基于模板引擎Jade的应用(详解)
Dec 12 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
Jul 28 Javascript
原生JS实现音乐播放器
Jan 26 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高级编程-函数-郑阿奇
2011/07/04 PHP
PHP中文件读、写、删的操作(PHP中对文件和目录操作)
2012/03/06 PHP
一个PHP针对数字的加密解密类
2014/03/20 PHP
PHP基于cookie与session统计网站访问量并输出显示的方法
2016/01/15 PHP
PHP中的正则表达式实例详解
2017/04/25 PHP
Laravel框架搜索分页功能示例
2019/02/01 PHP
PHP调用全国天气预报数据接口查询天气示例
2019/02/20 PHP
微信推送功能实现方式图文详解
2019/07/12 PHP
JQuery EasyUI 对话框的使用方法
2010/10/24 Javascript
JavaScript中将一个值转换为字符串的方法分析[译]
2012/09/21 Javascript
得到jQuery detach()后节点中的某个值实现代码
2013/02/05 Javascript
jquery限定文本框只能输入数字即整数和小数
2013/11/29 Javascript
javascript动态添加checkbox复选框的方法
2015/12/23 Javascript
JavaScript对Json的增删改属性详解
2016/06/02 Javascript
js格式化时间的简单实例
2016/11/27 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
2016/12/22 Javascript
jQuery实现html双向绑定功能示例
2017/10/09 jQuery
使用JS获取SessionStorage的值
2018/01/12 Javascript
微信小程序url传参写变量的方法
2018/08/09 Javascript
基于Koa(nodejs框架)对json文件进行增删改查的示例代码
2019/02/02 NodeJs
vue组件化中slot的基本使用方法
2019/05/01 Javascript
详解NodeJs项目 CentOs linux服务器线上部署
2019/09/16 NodeJs
微信小程序进入广告实现代码实例
2019/09/19 Javascript
[03:20]2015国际邀请赛全明星表演赛
2015/08/08 DOTA
[01:04:14]VP vs TNC 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
跟老齐学Python之模块的加载
2014/10/24 Python
深入理解Python单元测试unittest的使用示例
2017/11/18 Python
解决python "No module named pip" 的问题
2018/10/13 Python
Python for循环搭配else常见问题解决
2020/02/11 Python
HTML5实现应用程序缓存(Application Cache)
2020/06/16 HTML / CSS
天美时手表加拿大官网:Timex加拿大
2016/09/01 全球购物
婚礼证婚人证婚词
2014/01/08 职场文书
咖啡书吧创业计划书
2014/01/13 职场文书
国贸专业的职业规划范文
2014/01/23 职场文书
2015年财务工作总结范文
2015/03/31 职场文书
现实表现证明材料
2015/06/19 职场文书