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在一段文字中的光标处插入其他文字
Aug 26 Javascript
基于jquery的checkbox下拉框插件代码
Jun 25 Javascript
ExtJS中文乱码之GBK格式编码解决方案及代码
Jan 20 Javascript
JS弹出层的显示与隐藏示例代码
Dec 27 Javascript
js加入收藏以及使用Jquery更改透明度
Jan 26 Javascript
javascript监听鼠标滚轮事件浅析
Jun 05 Javascript
Vue 仿百度搜索功能实现代码
Feb 16 Javascript
ES6深入理解之“let”能替代”var“吗?
Jun 28 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
Jan 16 Javascript
taro小程序添加骨架屏的实现代码
Nov 15 Javascript
js实现图片实时时钟
Jan 15 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
Jul 26 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 n个不重复的随机数生成代码
2009/06/23 PHP
php设计模式 Builder(建造者模式)
2011/06/26 PHP
测试PHP连接MYSQL成功与否的代码
2013/08/16 PHP
php array_udiff_assoc 计算两个数组的差集实例
2016/11/12 PHP
PHP加MySQL消息队列深入理解
2021/02/27 PHP
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
2012/12/09 Javascript
jquery弹出关闭遮罩层实例
2013/08/06 Javascript
js调试系列 断点与动态调试[基础篇]
2014/06/18 Javascript
Web安全测试之XSS实例讲解
2016/08/15 Javascript
jQuery实现鼠标滑过图片移动特效
2016/12/08 Javascript
从零学习node.js之express入门(六)
2017/02/25 Javascript
详解VUE的状态控制与延时加载刷新
2017/03/27 Javascript
jQuery判断邮箱格式对错实例代码讲解
2017/04/12 jQuery
关于TypeScript中import JSON的正确姿势详解
2017/07/25 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
2017/07/28 Javascript
Vue底层实现原理总结
2018/02/17 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
2019/05/26 Javascript
vue点击页面空白处实现保存功能
2019/11/06 Javascript
微信小程序实现可长按移动控件
2020/11/01 Javascript
Python2.x中文乱码问题解决方法
2015/06/02 Python
利用numpy+matplotlib绘图的基本操作教程
2017/05/03 Python
python实现批量解析邮件并下载附件
2018/06/19 Python
对json字符串与python字符串的不同之处详解
2018/12/19 Python
Python selenium根据class定位页面元素的方法
2019/02/26 Python
使用python画社交网络图实例代码
2019/07/10 Python
python使用原始套接字发送二层包(链路层帧)的方法
2019/07/22 Python
Pytorch释放显存占用方式
2020/01/13 Python
浅析python中的del用法
2020/09/02 Python
成教自我鉴定
2013/10/27 职场文书
爱心活动计划书
2014/04/26 职场文书
预防传染病方案
2014/06/14 职场文书
群众路线教育实践活动学习心得体会
2014/10/30 职场文书
邀请书模板
2015/02/02 职场文书
2016年清明节寄语
2015/12/04 职场文书
2019年图书室自查报告范本
2019/10/12 职场文书
Pytorch中使用ImageFolder读取数据集时忽略特定文件
2022/03/23 Python