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 相关文章推荐
理解Javascript_11_constructor实现原理
Oct 18 Javascript
实例讲解jQuery中对事件的命名空间的运用
May 24 Javascript
使用开源工具制作网页验证码的方法
Oct 17 Javascript
浅析如何利用angular结合translate为项目实现国际化
Dec 08 Javascript
关于iframe跨域POST提交的方法示例
Jan 15 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
Mar 30 Javascript
微信小程序progress组件使用详解
Jan 31 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
Apr 03 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
Aug 07 Javascript
vue+axios+mock.js环境搭建的方法步骤
Aug 28 Javascript
JavaScript中AOP的实现与应用
May 06 Javascript
vue里的data要用return返回的原因浅析
May 28 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
搜索引擎技术核心揭密
2006/10/09 PHP
PHP远程采集图片详细教程
2014/07/01 PHP
Thinkphp 框架基础之源码获取、环境要求与目录结构分析
2020/04/27 PHP
JavaScript中:表达式和语句的区别[译]
2012/09/17 Javascript
JavaScript中的console.group()函数详细介绍
2014/12/29 Javascript
Javascript writable特性介绍
2015/02/27 Javascript
JavaScript中消除闭包的一般方法介绍
2015/03/16 Javascript
初识angular框架后的所思所想
2016/02/19 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
2016/09/24 Javascript
jQuery常见的选择器及用法介绍
2016/12/20 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
2017/07/28 Javascript
vue-router的使用方法及含参数的配置方法
2018/11/13 Javascript
Vue Router history模式的配置方法及其原理
2019/05/30 Javascript
jQuery位置选择器用法实例分析
2019/06/28 jQuery
如何在JavaScript中等分数组的实现
2020/12/13 Javascript
three.js显示中文字体与tween应用详析
2021/01/04 Javascript
[13:56]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第一场
2018/04/06 DOTA
[53:38]OG vs LGD 2018国际邀请赛淘汰赛BO3 第三场 8.26
2018/08/30 DOTA
python中执行shell命令的几个方法小结
2014/09/18 Python
python实现端口转发器的方法
2015/03/13 Python
Python使用metaclass实现Singleton模式的方法
2015/05/05 Python
Python中input与raw_input 之间的比较
2017/08/20 Python
pygame游戏之旅 计算游戏中躲过的障碍数量
2018/11/20 Python
pycharm运行程序时看不到任何结果显示的解决
2020/02/21 Python
Python字符串格式化f-string多种功能实现
2020/05/07 Python
大学在校生求职信范文
2013/11/21 职场文书
十一酒店活动方案
2014/02/20 职场文书
对公司合理化的建议书
2014/03/12 职场文书
优秀党务工作者事迹材料
2014/05/07 职场文书
集中采购方案
2014/06/10 职场文书
党的群众路线教育实践活动总结
2014/10/30 职场文书
教师群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
PyTorch 如何设置随机数种子使结果可复现
2021/05/12 Python
Python实现信息轰炸工具(再也不怕说不过别人了)
2021/06/11 Python
angular异步验证器防抖实例详解
2022/03/31 Javascript
如何让你的Nginx支持分布式追踪详解
2022/07/07 Servers