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操作JSON实例代码
Feb 09 Javascript
28个JS验证函数收集
Mar 02 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
Apr 19 Javascript
浏览器页面区域大小的js获取方法
Sep 21 Javascript
js获取ajax返回值代码
Apr 30 Javascript
JavaScript中的style.cssText使用教程
Nov 06 Javascript
详解JavaScript对象序列化
Jan 19 Javascript
浅谈es6 javascript的map数据结构
Dec 14 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
Sep 05 Javascript
JavaScript命令模式原理与用法实例详解
Mar 10 Javascript
vue页面引入three.js实现3d动画场景操作
Aug 10 Javascript
如何用JS实现简单的数据监听
May 06 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中提问频率最高的11个面试题和答案
2014/09/02 PHP
php+MySQL实现登录时验证登录名和密码是否正确
2016/05/10 PHP
简单实现php上传文件功能
2017/09/21 PHP
PHP实现微信红包金额拆分试玩的算法示例
2018/04/07 PHP
php-fpm重启导致的程序执行中断问题详解
2019/04/29 PHP
JQUERY1.6 使用方法四 检测浏览器
2011/11/23 Javascript
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
2012/12/27 Javascript
jQuery函数的等价原生函数代码示例
2013/05/27 Javascript
js中this的用法实例分析
2015/01/10 Javascript
JavaScript中模拟实现jsonp
2015/06/19 Javascript
AngularJS入门教程之ng-checked 指令详解
2016/08/01 Javascript
AngularJS指令详解及示例代码
2016/08/16 Javascript
javascript验证内容为数字以及长度为10的简单实例
2016/08/20 Javascript
鼠标经过出现气泡框的简单实例
2017/03/17 Javascript
echarts饼图扇区添加点击事件的实例
2017/10/16 Javascript
jquery animate动画持续运动的实例
2017/11/29 jQuery
vue.js自定义组件directives的实例代码
2018/11/09 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
2019/04/23 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
2020/05/20 Javascript
[04:38]完美世界携手游戏风云打造 卡尔工作室饰品系统篇
2013/04/25 DOTA
[50:20]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第四局
2016/03/06 DOTA
Python 字符串操作实现代码(截取/替换/查找/分割)
2013/06/08 Python
Python数据类型学习笔记
2016/01/13 Python
Django添加favicon.ico图标的示例代码
2018/08/07 Python
html5 学习简单的拾色器
2010/09/03 HTML / CSS
五个2015 年最佳HTML5 框架
2015/11/11 HTML / CSS
TCP协议通讯的过程和步骤是什么
2015/10/18 面试题
奉献演讲稿范文
2014/05/21 职场文书
感恩小明星事迹材料
2014/05/23 职场文书
法人任命书范本
2014/06/04 职场文书
庆祝三八妇女节标语
2014/10/09 职场文书
学习作风建设心得体会
2014/10/22 职场文书
税务会计岗位职责
2015/04/02 职场文书
2015最新民情日记范文
2015/06/26 职场文书
运动会闭幕式致辞
2015/07/29 职场文书
《爬天都峰》教学反思
2016/02/23 职场文书