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 AJAX实现目录浏览与编辑的代码
Oct 21 Javascript
jquery延迟加载外部js实现代码
Jan 11 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
Sep 22 Javascript
JavaScript获取网页中第一个链接ID的方法
Apr 03 Javascript
JQuery插件ajaxfileupload.js异步上传文件实例
May 19 Javascript
实例详解jQuery结合GridView控件的使用方法
Jan 04 Javascript
jQuery实现查找最近父节点的方法
Jun 23 Javascript
JavaScript瀑布流布局实现代码
May 06 Javascript
Vue v2.5 调整和更新不完全问题
Oct 24 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
Mar 12 Javascript
node.js环境搭建图文详解
Sep 19 Javascript
浅析JavaScript 函数柯里化
Sep 08 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代码
2010/02/16 PHP
解析:通过php socket并借助telnet实现简单的聊天程序
2013/06/18 PHP
ThinkPHP入口文件设置及相关注意事项分析
2014/12/05 PHP
PHP实现自动识别原编码并对字符串进行编码转换的方法
2016/07/13 PHP
php添加数据到xml文件的简单例子
2016/09/08 PHP
浅谈Laravel模板实体转义带来的坑
2019/10/22 PHP
DEFER怎么用?
2006/07/01 Javascript
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
2006/09/07 Javascript
jquery 无限级联菜单案例分享
2013/03/26 Javascript
javaScript使用EL表达式的几种方式
2014/05/27 Javascript
基于javascript代码实现通过点击图片显示原图片
2015/11/29 Javascript
jquery 动态合并单元格的实现方法
2016/08/26 Javascript
Javascript中的 “&amp;” 和 “|” 详解
2017/02/02 Javascript
jquery滚动条插件slimScroll使用方法
2017/02/09 Javascript
Nginx 配置多站点vhost 的方法
2018/01/07 Javascript
使用D3.js+Vue实现一个简单的柱形图
2018/08/05 Javascript
基于 jQuery 实现键盘事件监听控件
2019/04/04 jQuery
jQuery实现容器间的元素拖拽功能
2020/12/01 jQuery
[45:46]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS DT
2014/05/23 DOTA
浅谈Python程序与C++程序的联合使用
2015/04/07 Python
Python 专题五 列表基础知识(二维list排序、获取下标和处理txt文本实例)
2017/03/20 Python
利用django如何解析用户上传的excel文件
2017/07/24 Python
解决python3读取Python2存储的pickle文件问题
2018/10/25 Python
Python高阶函数、常用内置函数用法实例分析
2019/12/26 Python
python selenium 获取接口数据的实现
2020/12/07 Python
python实现计算器简易版
2020/12/17 Python
html5 更新图片颜色示例代码
2014/07/29 HTML / CSS
英国助听器购物网站:Hearing Direct
2018/08/21 全球购物
Etam艾格英国官网:法国著名女装品牌
2019/04/15 全球购物
幼儿园家长会邀请函
2014/01/15 职场文书
高中军训感言200字
2014/02/23 职场文书
助人为乐模范事迹材料
2014/06/02 职场文书
传承焦裕禄精神思想汇报2014
2014/09/10 职场文书
环保宣传语大全
2015/07/13 职场文书
班主任培训研修日志
2015/11/13 职场文书
详解pytorch创建tensor函数
2022/03/22 Python