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 相关文章推荐
JavaScript Event学习第五章 高级事件注册模型
Feb 07 Javascript
超越Jquery_01_isPlainObject分析与重构
Oct 20 Javascript
微博@符号的用户名提示效果。(想@到谁?)
Nov 05 Javascript
node.js实现BigPipe详解
Dec 05 Javascript
如何编写高质量JS代码
Dec 28 Javascript
jQuery中:first-child选择器用法实例
Dec 31 Javascript
JavaScript实现将xml转换成html table表格的方法
Apr 17 Javascript
js去除浏览器默认底图的方法
Jun 08 Javascript
JavaScript实现的XML与JSON互转功能详解
Feb 16 Javascript
JavaScript瀑布流布局实现代码
May 06 Javascript
angularjs中ng-bind-html的用法总结
May 23 Javascript
详解react-router4 异步加载路由两种方法
Sep 12 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
golang与php实现计算两个经纬度之间距离的方法
2016/07/22 PHP
highchart数据源纵轴json内的值必须是int(详解)
2017/02/20 PHP
wordpress自定义标签云与随机获取标签的方法详解
2019/03/22 PHP
JavaScript实现Sleep函数的代码
2007/03/04 Javascript
javascript 最常用的10个自定义函数[推荐]
2009/12/26 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
2012/02/16 Javascript
js限制文本框只能输入数字(正则表达式)
2012/07/15 Javascript
jQuery实现鼠标可拖动调整表格列宽度
2014/05/26 Javascript
jquery彩色投票进度条简单实例演示
2020/07/23 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
2016/04/27 Javascript
JavaScript 身份证号有效验证详解及实例代码
2016/10/20 Javascript
百度搜索框智能提示案例jsonp
2016/11/28 Javascript
JavaScript用构造函数如何获取变量的类型名
2016/12/23 Javascript
JavaScript函数柯里化原理与用法分析
2017/03/31 Javascript
薪资那么高的Web前端必看书单
2017/10/13 Javascript
vue路由插件之vue-route
2019/06/13 Javascript
[00:23]DOTA2群星共贺开放测试 25日无码时代来袭
2013/09/23 DOTA
Python递归实现汉诺塔算法示例
2018/03/19 Python
对pandas中to_dict的用法详解
2018/06/05 Python
python 读写文件,按行修改文件的方法
2018/07/12 Python
python中类的属性和方法介绍
2018/11/27 Python
Python基于plotly模块实现的画图操作示例
2019/01/23 Python
Pyqt5如何让QMessageBox按钮显示中文示例代码
2019/04/11 Python
python射线法判断一个点在图形区域内外
2019/06/28 Python
玩具反斗城西班牙网上商城:ToysRUs西班牙
2017/01/19 全球购物
巴西儿童时尚购物网站:Dinda
2019/08/14 全球购物
托管代码(Managed Code)和非托管代码(Unmanaged Code)有什么区别
2014/09/29 面试题
Linux面试经常问的文件系统操作命令
2016/10/04 面试题
学雷锋先进个人事迹
2014/05/26 职场文书
市场营销专业应届生自荐信
2014/06/19 职场文书
我爱祖国演讲稿
2014/09/02 职场文书
大四优秀党员个人民主评议
2014/09/19 职场文书
2014年幼儿园学期工作总结
2014/12/05 职场文书
青少年法制教育心得体会
2016/01/14 职场文书
高考升学宴主持词
2019/06/21 职场文书
nginx实现多geoserver服务的负载均衡
2022/05/15 Servers