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 23 Javascript
JQuery Study Notes 学习笔记(一)
Aug 04 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
Nov 17 Javascript
JavaScript使用Range调色及透明度实例
Sep 25 Javascript
jquery把int类型转换成字符串类型的方法
Oct 07 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
Oct 11 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
Dec 16 Javascript
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
深入理解Vue Computed计算属性原理
May 29 Javascript
浅谈layui使用模板引擎动态渲染元素要注意的问题
Sep 14 Javascript
JS函数参数的传递与同名参数实例分析
Mar 16 Javascript
JavaScript cookie原理及使用实例
May 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 高手之路(一)
2006/10/09 PHP
PHP 输出简单动态WAP页面
2009/06/09 PHP
PHP将整个网站生成HTML纯静态网页的方法总结
2012/02/05 PHP
php查找指定目录下指定大小文件的方法
2014/11/28 PHP
用jscript实现列出安装的软件列表
2007/06/18 Javascript
javascript document.execCommand() 常用解析
2009/12/14 Javascript
鼠标焦点离开文本框时验证的js代码
2013/07/19 Javascript
用js来获取上传的文件名纯粹是为了美化而用
2013/10/23 Javascript
TypeScript Type Innference(类型判断)
2016/03/10 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
2017/02/08 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
2017/02/13 Javascript
jquery+css实现侧边导航栏效果
2017/06/12 jQuery
使用store来优化React组件的方法
2017/10/23 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
2020/07/19 Javascript
python每次处理固定个数的字符的方法总结
2013/01/29 Python
在Python的Flask中使用WTForms表单框架的基础教程
2016/06/07 Python
Python通过RabbitMQ服务器实现交换机功能的实例教程
2016/06/29 Python
解决Linux系统中python matplotlib画图的中文显示问题
2017/06/15 Python
python中文件变化监控示例(watchdog)
2017/10/16 Python
numpy添加新的维度:newaxis的方法
2018/08/02 Python
Python大数据之使用lxml库解析html网页文件示例
2019/11/16 Python
Django关于admin的使用技巧和知识点
2020/02/10 Python
浅谈keras中loss与val_loss的关系
2020/06/22 Python
联想法国官方网站:Lenovo法国
2018/10/18 全球购物
美国在线健康和美容市场:Pharmapacks
2018/12/05 全球购物
简述进程的启动、终止的方式以及如何进行进程的查看
2014/02/20 面试题
人民教师的自我评价分享
2014/02/21 职场文书
优秀经理获奖感言
2014/03/04 职场文书
大学生就业策划书范文
2014/04/04 职场文书
中央空调节能方案
2014/06/15 职场文书
大专学生求职自荐信
2014/07/06 职场文书
开服装店计划书
2014/08/15 职场文书
义诊活动总结
2015/02/04 职场文书
博士生专家推荐信
2015/03/25 职场文书
贷款担保书范本
2015/09/22 职场文书
2016大学生暑期三下乡心得体会
2016/01/23 职场文书