Bootstrap中点击按钮后变灰并显示加载中实例代码


Posted in Javascript onSeptember 23, 2016

Bootstrap插件非常的好用了,我们今天一起来看一篇关于Bootstrap实现点击按钮之后按钮变成不可点击的一个效果了,具体的如下所示.

1.在按钮中加入data-loading-text,即点击按钮后显示的文字

<button type="submit" class="btn btn-primary btn-check" data-loading-text="提交中...">添加成员</button>

2.当点击按钮后禁用按钮,并显示文字。如需绑定其他事件请自行更改。

第二三行为重要内容。

$(".btn-check").click(function () { 
$(this).button('loading');//禁用按钮并显示提交中 
$(this).button('reset');//重置按钮 
});

3.设置disabled属性为true即为不可用状态。

document.getElementByIdx("btn").disabled=true;

jquery

$("#btn").attr("disabled", true);

html:

<input type="button" value="提交" id="btn">

以上所述是小编给大家介绍的Bootstrap中点击按钮后变灰并显示加载中实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery示例收集
Nov 05 Javascript
解析jQuery与其它js(Prototype)库兼容共存
Jul 04 Javascript
使用jQuery避免鼠标双击的解决方案
Aug 21 Javascript
javascript事件函数中获得事件源的两种不错方法
Mar 17 Javascript
javascript实现手机震动API代码
Aug 05 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
Nov 03 Javascript
ES6中如何使用Set和WeakSet
Mar 10 Javascript
原生js和jquery分别实现横向导航菜单效果
May 13 Javascript
JS基于递归实现倒计时效果的方法
Nov 26 Javascript
jQuery中Datatables增加跳转到指定页功能
Feb 08 Javascript
Redux实现组合计数器的示例代码
Jul 04 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
Oct 29 Javascript
jQuery实现边框动态效果的实例代码
Sep 23 #Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
Sep 23 #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
You might like
PHP 配置open_basedir 让各虚拟站点独立运行
2009/11/12 PHP
phpexcel导入excel数据使用方法实例
2013/12/24 PHP
php注册和登录界面的实现案例(推荐)
2016/10/24 PHP
基于jquery的不规则矩形的排列实现代码
2012/04/16 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
2013/01/11 Javascript
jQuery 三击事件实现代码
2013/09/11 Javascript
Jquery实现图片放大镜效果的思路及代码(自写)
2013/10/18 Javascript
js实现点小图看大图效果的思路及示例代码
2013/10/28 Javascript
将字符串中由空格隔开的每个单词首字母大写
2014/04/06 Javascript
深入分析JSON编码格式提交表单数据
2015/06/25 Javascript
vue开发心得和技巧分享
2016/10/27 Javascript
仿iframe效果Aajx文件上传实例
2016/11/18 Javascript
bootstrap输入框组使用方法
2017/02/07 Javascript
详解Vuex中mapState的具体用法
2017/09/28 Javascript
vue router demo详解
2017/10/13 Javascript
jQuery图片加载失败替换默认图片方法汇总
2017/11/29 jQuery
原生JS实现获取及修改CSS样式的方法
2018/09/04 Javascript
JS重学系列之聊聊new操作符
2019/03/04 Javascript
vue-cli脚手架打包静态资源请求出错的原因与解决
2019/06/06 Javascript
Vue使用Proxy监听所有接口状态的方法实现
2019/06/07 Javascript
[01:34]2014DOTA2 TI预选赛预选赛 选手比赛房大揭秘!
2014/05/20 DOTA
[56:14]Fnatic vs OG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python 文件与目录操作
2008/12/24 Python
python写的ARP攻击代码实例
2014/06/04 Python
Python 爬虫学习笔记之正则表达式
2016/09/21 Python
Python爬取qq music中的音乐url及批量下载
2017/03/23 Python
python实现数据写入excel表格
2018/03/25 Python
python xlsxwriter创建excel图表的方法
2018/06/11 Python
Django 实现admin后台显示图片缩略图的例子
2019/07/28 Python
Python3读写ini配置文件的示例
2020/11/06 Python
HTML5的video标签的浏览器兼容性增强方案分享
2016/05/19 HTML / CSS
小饰品店的创业计划书范文
2013/12/28 职场文书
市场专员岗位职责
2014/02/14 职场文书
护理人员的自我评价分享
2014/03/15 职场文书
试用期转正员工自我评价
2014/09/18 职场文书
python实现大文本文件分割成多个小文件
2021/04/20 Python