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自定义图片热区效果
Jul 21 Javascript
node.js中的fs.writeFileSync方法使用说明
Dec 14 Javascript
jQuery内容过滤选择器用法示例
Sep 09 Javascript
JavaScript中setTimeout的那些事儿
Nov 14 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
Dec 20 Javascript
使用JavaScript触发过渡效果的方法
Jan 19 Javascript
AngularJS执行流程详解
Feb 17 Javascript
webpack学习教程之publicPath路径问题详解
Jun 17 Javascript
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
Dec 28 Javascript
React-router4路由监听的实现
Aug 07 Javascript
微信小程序收藏功能的实现代码
Jun 19 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 05 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的Yii框架中YiiBase入口类的扩展写法示例
2016/03/17 PHP
php设计模式之单例模式用法经典示例分析
2019/09/20 PHP
php模拟post提交请求调用接口示例解析
2020/08/07 PHP
简单的无缝滚动程序-仅几行代码
2007/05/08 Javascript
javascript实现跳转菜单的具体方法
2013/07/05 Javascript
jcrop基本参数一览
2013/07/16 Javascript
offsetHeight在OnLoad中获取为0的现象
2013/07/22 Javascript
js仿百度贴吧验证码特效实例代码
2014/01/16 Javascript
Bootstrap每天必学之导航
2015/11/26 Javascript
jquery对象和DOM对象的任意相互转换
2016/02/21 Javascript
基于javascript bootstrap实现生日日期联动选择
2016/04/07 Javascript
前端面试题及答案整理(二)
2016/08/26 Javascript
AngularJs directive详解及示例代码
2016/09/01 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
2017/04/14 jQuery
nodejs 生成和导出 word的实例代码
2018/07/31 NodeJs
简单了解JavaScript中常见的反模式
2019/06/21 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
2020/03/23 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
2020/09/02 Javascript
ES6学习教程之Promise用法详解
2020/11/22 Javascript
jQuery实现电梯导航模块
2020/12/22 jQuery
Python单链表简单实现代码
2016/04/27 Python
Python 模块EasyGui详细介绍
2017/02/19 Python
目前最全的python的就业方向
2018/06/05 Python
Pyqt5 基本界面组件之inputDialog的使用
2019/06/25 Python
Python获取excel内容及相关操作代码实例
2020/08/10 Python
Canvas 文字碰撞检测并抽稀的方法
2019/05/27 HTML / CSS
菲律宾最大的网上花店和礼品店:PhilFlower.com
2018/02/09 全球购物
美国滑雪板和装备购物网站:Skis.com
2018/12/20 全球购物
美国在线购买空气净化器、除湿器、加湿器网站:AllergyBuyersClub
2021/03/16 全球购物
Ajax主要包含了哪些技术
2014/06/12 面试题
关于安全的演讲稿
2014/05/09 职场文书
党员教师自我剖析材料
2014/09/29 职场文书
2015年房产经纪人工作总结
2015/05/15 职场文书
子女赡养老人协议书
2016/03/23 职场文书
解析原生JS getComputedStyle
2021/05/25 Javascript
python中redis包操作数据库的教程
2022/04/19 Python