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 相关文章推荐
动态加载iframe
Jun 16 Javascript
IE中图片的onload事件无效问题和解决方法
Jun 06 Javascript
iframe调用父页面函数示例详解
Jul 17 Javascript
jQuery Dialog 取消右上角删除按钮事件
Sep 07 Javascript
js实现滑动到页面底部自动加载更多功能
Feb 15 Javascript
图片加载完成再执行事件的实例
Nov 16 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
Mar 03 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
Aug 15 Javascript
vue删除html内容的标签样式实例
Sep 13 Javascript
es6函数中的作用域实例分析
Apr 18 Javascript
vue在App.vue文件中监听路由变化刷新页面操作
Aug 14 Javascript
vue中的循环对象属性和属性值用法
Sep 04 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 array_flip() 删除数组重复元素
2009/01/14 PHP
PHP 编程的 5个良好习惯
2009/02/20 PHP
php实现session自定义会话处理器的方法
2015/01/27 PHP
ThinkPHP中create()方法自动验证表单信息
2017/04/28 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
Span元素的width属性无效果原因及解决方案
2010/01/15 Javascript
javascript Array数组对象的扩展函数代码
2010/05/22 Javascript
Javascript字符串浏览器兼容问题分析
2014/12/01 Javascript
老生常谈Javascript中的原型和this指针
2016/10/09 Javascript
Jquery树插件zTree实现菜单树
2017/01/24 Javascript
jQuery表单验证之密码确认
2017/05/22 jQuery
详解vue嵌套路由-query传递参数
2017/05/23 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
2018/03/09 jQuery
Vue父子组件双向绑定传值的实现方法
2018/07/31 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
2019/05/16 Javascript
Python素数检测的方法
2015/05/11 Python
详解Python如何获取列表(List)的中位数
2016/08/12 Python
Python字典,函数,全局变量代码解析
2017/12/18 Python
Python数据拟合与广义线性回归算法学习
2017/12/22 Python
Python实现读取及写入csv文件的方法示例
2018/01/12 Python
python如何为被装饰的函数保留元数据
2018/03/21 Python
对Python中的@classmethod用法详解
2018/04/21 Python
python跳过第一行快速读取文件内容的实例
2018/07/12 Python
Python模拟浏览器上传文件脚本的方法(Multipart/form-data格式)
2018/10/22 Python
Python实现的合并两个有序数组算法示例
2019/03/04 Python
浅谈pandas dataframe对除数是零的处理
2020/07/20 Python
Django返回HTML文件的实现方法
2020/09/17 Python
最新pycharm安装教程
2020/11/18 Python
浅谈CSS3鼠标移入图片动态提示效果(transform)
2017/11/06 HTML / CSS
阿拉伯时尚购物网站:Nisnass
2021/02/07 全球购物
最新个人职业生涯规划书
2014/01/22 职场文书
酒店服务员岗位职责
2015/02/09 职场文书
单位更名证明
2015/06/18 职场文书
幼儿园六一主持词
2015/06/30 职场文书
CSS中em的正确打开方式详解
2021/04/08 HTML / CSS
详解nodejs内置模块
2021/05/06 NodeJs