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 多种搜索引擎集成的页面实现代码
Jan 02 Javascript
javascript分页代码(当前页码居中)
Sep 20 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
Aug 14 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
Aug 17 Javascript
基于JS实现无缝滚动思路及代码分享
Jun 07 Javascript
详解javascript获取url信息的常见方法
Dec 19 Javascript
react.js 获取真实的DOM节点实例(必看)
Apr 17 Javascript
react 父子组件之间通讯props
Sep 08 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
Jun 08 Javascript
jquery实现简单拖拽效果
Jul 20 jQuery
解决ant Design中Select设置initialValue时的大坑
Oct 29 Javascript
vue组件是如何解析及渲染的?
Jan 13 Vue.js
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 高手之路(三)
2006/10/09 PHP
生成随机字符串和验证码的类的PHP实例
2013/12/24 PHP
Laravel中扩展Memcached缓存驱动实现使用阿里云OCS缓存
2015/02/10 PHP
PHP入门教程之图像处理技巧分析
2016/09/11 PHP
php cookie 详解使用实例
2016/11/03 PHP
php遍历替换目录下文件指定内容的方法
2016/11/10 PHP
延时重复执行函数 lLoopRun.js
2007/05/08 Javascript
My Desktop :) 桌面式代码
2008/12/29 Javascript
javascript 写类方式之六
2009/07/05 Javascript
基于jquery实现的文字淡入淡出效果
2013/11/14 Javascript
浅析Cookie中的Path与domain
2013/12/18 Javascript
jquery显示隐藏元素的实现代码
2016/05/19 Javascript
jquery轮播的实现方式 附完整实例
2016/07/28 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
2016/08/16 Javascript
vue-cli 组件的导入与使用教程详解
2018/04/11 Javascript
vue使用中的内存泄漏【推荐】
2018/07/10 Javascript
angularJs在多个控制器中共享服务数据的方法
2018/09/30 Javascript
vue路由前进后退动画效果的实现代码
2018/12/10 Javascript
详解JS浏览器事件循环机制
2019/03/27 Javascript
微信小程序可滑动月日历组件使用详解
2019/10/21 Javascript
JavaScript中如何对多维数组(矩阵)去重的实现
2019/12/04 Javascript
JavaScript回调函数callback用法解析
2020/01/14 Javascript
[57:47]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
简述:我为什么选择Python而不是Matlab和R语言
2017/11/14 Python
解决python3 requests headers参数不能有中文的问题
2019/08/21 Python
Python绘制股票移动均线的实例
2019/08/24 Python
Selenium及python实现滚动操作多种方法
2020/07/21 Python
分享一个python的aes加密代码
2020/12/22 Python
HTML块级标签汇总(小篇)
2016/07/13 HTML / CSS
英国安全产品购物网站:The Safe Shop
2017/03/20 全球购物
JSP&Servlet技术面试题
2015/05/21 面试题
2015年社区计生工作总结
2015/04/21 职场文书
风雨哈佛路观后感
2015/06/03 职场文书
网络营销实训总结
2015/08/03 职场文书
创业计划书之少年玩具店
2019/09/05 职场文书
浅谈TypeScript 索引签名的理解
2021/10/16 Javascript