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与CSS复习(三)
Jun 29 Javascript
(jQuery,mootools,dojo)使用适合自己的编程别名命名
Sep 14 Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
May 08 Javascript
可编辑下拉框的2种实现方式
Jun 13 Javascript
javascript批量修改文件编码格式的方法
Jan 27 Javascript
关于Bootstrap弹出框无法调用问题的解决办法
Mar 10 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
Mar 11 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
Oct 25 Javascript
ES6新特性之Symbol类型用法分析
Mar 31 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
Sep 10 Javascript
解决layui使用layui-icon出现默认图标的问题
Sep 11 Javascript
使用JavaScript计算前一天和后一天的思路详解
Dec 20 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/05/26 PHP
PHP中判断变量为空的几种方法分享
2013/08/26 PHP
php中出现空白页的原因及解决方法汇总
2014/07/08 PHP
PHP的pcntl多进程用法实例
2015/03/19 PHP
PHP数学运算与数据处理实例分析
2016/04/01 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
4种Windows系统下Laravel框架的开发环境安装及部署方法详解
2020/04/06 PHP
JavaScript入门基础
2015/08/12 Javascript
Jquery常用的方法汇总
2015/09/01 Javascript
JS模拟简易滚动条效果代码(附demo源码)
2016/04/05 Javascript
jQuery层次选择器用法示例
2016/09/09 Javascript
js 弹出虚拟键盘修改密码的简单实例
2016/10/10 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
2016/11/29 Javascript
详解基于webpack2.x的vue2.x的多页面站点
2017/08/21 Javascript
VUE 全局变量的几种实现方式
2018/08/22 Javascript
Puppet的一些技巧
2018/09/17 Javascript
css配合JavaScript实现tab标签切换效果
2018/10/11 Javascript
socket io与vue-cli的结合使用的示例代码
2018/11/01 Javascript
JavaScript 实现同时选取多个时间段的方法
2019/10/17 Javascript
JS字符串和数组如何实现相互转化
2020/07/02 Javascript
[01:14:55]EG vs Spirit Supermajor 败者组 BO3 第三场 6.4
2018/06/05 DOTA
[00:06]Yes,it worked!小卡尔成功穿越时空加入战场!
2019/07/20 DOTA
黑科技 Python脚本帮你找出微信上删除你好友的人
2016/01/07 Python
python使用arcpy.mapping模块批量出图
2017/03/06 Python
Python探索之URL Dispatcher实例详解
2017/10/28 Python
PyQt5实现简易电子词典
2019/06/25 Python
基于Pytorch SSD模型分析
2020/02/18 Python
Python MySQLdb 执行sql语句时的参数传递方式
2020/03/04 Python
基于tensorflow for循环 while循环案例
2020/06/30 Python
Python基于字典实现switch case函数调用
2020/07/22 Python
实例讲解利用HTML5 Canvas API操作图形旋转的方法
2016/03/22 HTML / CSS
HTML5 直播疯狂点赞动画实现代码 附源码
2020/04/14 HTML / CSS
泰国排名第一的家居用品中心:HomePro
2020/11/18 全球购物
食品销售计划书
2014/04/26 职场文书
2015年秋季学校开学标语
2015/07/16 职场文书