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入门教程(6) Window窗口对象
Jan 31 Javascript
iframe的父子窗口之间的对象相互调用基本用法
Sep 03 Javascript
jQuery中[attribute=value]选择器用法实例
Dec 31 Javascript
javascript引用赋值(地址传值)用法实例
Jan 13 Javascript
jQuery编写设置和获取颜色的插件
Jan 09 Javascript
JS实现下拉菜单列表与登录注册弹窗效果
Aug 10 Javascript
react-native 圆弧拖动进度条实现的示例代码
Apr 12 Javascript
vue如何解决循环引用组件报错的问题
Sep 22 Javascript
详解小程序rich-text对富文本支持方案
Nov 28 Javascript
浅谈vue后台管理系统权限控制思考与实践
Dec 19 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
Sep 05 Javascript
基于JS实现快速读取TXT文件
Aug 25 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
经典的PHPer为什么被认为是草根?
2007/04/02 PHP
php强制下载类型的实现代码
2011/04/21 PHP
一个PHP的远程图片抓取函数分享
2013/09/25 PHP
ThinkPHP缓存方法S()概述
2014/06/13 PHP
PHP对象链式操作实现原理分析
2016/10/09 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
PHP开发之用微信远程遥控服务器
2018/01/25 PHP
js中几种去掉字串左右空格的方法
2006/12/25 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
2013/11/07 Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
2015/03/31 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
2015/03/31 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
2015/04/24 Javascript
JavaScript Array对象详解
2016/03/01 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
2016/04/07 Javascript
深入理解Ajax的get和post请求
2016/06/02 Javascript
有趣的bootstrap走动进度条
2016/12/01 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
2017/06/19 Javascript
Angular @HostBinding()和@HostListener()用法
2018/03/05 Javascript
浅谈mvvm-simple双向绑定简单实现
2018/04/18 Javascript
js自定义input文件上传样式
2018/10/26 Javascript
微信小程序云开发之使用云存储
2019/05/17 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
2019/09/19 Javascript
Openlayers测量距离与面积的实现方法
2020/09/25 Javascript
Django中针对基于类的视图添加csrf_exempt实例代码
2018/02/11 Python
详解Django之auth模块(用户认证)
2018/04/17 Python
Python解析json时提示“string indices must be integers”问题解决方法
2019/07/31 Python
Python 实现递归法解决迷宫问题的示例代码
2020/01/12 Python
Pytorch中.new()的作用详解
2020/02/18 Python
Django 实现将图片转为Base64,然后使用json传输
2020/03/27 Python
python实现对变位词的判断方法
2020/04/05 Python
Python操作Elasticsearch处理timeout超时
2020/07/17 Python
无故旷工检讨书
2014/01/26 职场文书
跳蚤市场口号
2014/06/13 职场文书
学生自我鉴定格式及范文
2014/09/16 职场文书
派出所副所长四风问题个人整改措施思想汇报
2014/10/13 职场文书
2014年保管员工作总结
2014/11/18 职场文书