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 相关文章推荐
用 JSON 处理缓存
Apr 27 Javascript
JQuery 学习笔记 选择器之三
Jul 23 Javascript
Jquery操作Select 简单方便 一个js插件搞定
Nov 12 Javascript
JQUBar 基于JQUERY的柱状图插件
Nov 23 Javascript
Javascript selection的兼容性写法介绍
Dec 20 Javascript
JQuery给元素绑定click事件多次执行的解决方法
May 29 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
Jan 23 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
Jul 13 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
Sep 26 Javascript
Layui实现带查询条件的分页
Jul 27 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 jQuery
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
Aug 27 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
老机欣赏|中国60年代精品收音机
2021/03/02 无线电
PHP获取url的函数代码
2011/08/02 PHP
php中禁止单个IP与ip段访问的代码小结
2012/07/04 PHP
PHP字符串中特殊符号的过滤方法介绍
2014/02/18 PHP
php生成微信红包数组的方法
2019/09/05 PHP
Laravel开启跨域请求的方法
2019/10/13 PHP
JAVASCRIPT下判断IE与FF的比较简单的方式
2008/10/17 Javascript
取得窗口大小 兼容所有浏览器的js代码
2011/08/09 Javascript
浅析LigerUi开发中谨慎载入common.css文件
2013/07/09 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
2014/05/12 Javascript
JavaScript按值删除数组元素的方法
2015/04/24 Javascript
JavaScript面向对象之私有静态变量实例分析
2016/01/14 Javascript
Angular2搜索和重置按钮过场动画
2017/05/24 Javascript
js案例之鼠标跟随jquery版(实例讲解)
2017/07/21 jQuery
基于Vuex无法观察到值变化的解决方法
2018/03/01 Javascript
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
[02:49]2018DOTA2亚洲邀请赛主赛事决赛日战况回顾 Mineski鏖战5局夺得辉耀
2018/04/10 DOTA
[55:42]VG vs VGJ.T 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
Python模块学习 filecmp 文件比较
2012/08/27 Python
解决pyqt5中QToolButton无法使用的问题
2019/06/21 Python
Python如何应用cx_Oracle获取oracle中的clob字段问题
2019/08/27 Python
Python依赖包迁移到断网环境操作
2020/07/13 Python
详解rem 适配布局
2018/10/31 HTML / CSS
澳大利亚电子产品购物网站:Dick Smith
2017/02/02 全球购物
《望洞庭》教学反思
2014/02/16 职场文书
优秀教师演讲稿
2014/05/06 职场文书
2014年收银工作总结
2014/11/13 职场文书
收银员岗位职责
2015/02/03 职场文书
公积金具结保证书
2015/05/11 职场文书
公务员学习中国梦心得体会
2016/01/05 职场文书
原生CSS实现文字无限轮播的通用方法
2021/03/30 HTML / CSS
Python排序算法之插入排序及其优化方案详解
2021/06/11 Python
JavaScript实现栈结构详细过程
2021/12/06 Javascript
Java Spring Lifecycle的使用
2022/05/06 Java/Android
Nginx 常用配置
2022/05/15 Servers
MySQL优化之慢日志查询
2022/06/10 MySQL