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 相关文章推荐
解决FireFox下[使用event很麻烦]的问题
Nov 26 Javascript
判断客户浏览器是否支持cookie的示例代码
Dec 23 Javascript
jQuery中insertBefore()方法用法实例
Jan 08 Javascript
jquery图片切换实例分析
Apr 15 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
May 27 Javascript
javascript验证手机号和实现星号(*)代替实例
Aug 16 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
Feb 21 Javascript
thinkjs 文件上传功能实例代码
Nov 08 Javascript
VUE2.0中Jsonp的使用方法
May 22 Javascript
vue中axios实现数据交互与跨域问题
May 12 Javascript
js中addEventListener()与removeEventListener()用法案例分析
Mar 02 Javascript
js面向对象编程OOP及函数式编程FP区别
Jul 07 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二维数组排序详解
2013/11/06 PHP
php通过文件流方式复制文件的方法
2015/03/13 PHP
学习php设计模式 php实现访问者模式(Visitor)
2015/12/07 PHP
PHP读取mssql json数据中文乱码的解决办法
2016/04/11 PHP
PHP实现图片的等比缩放和Logo水印功能示例
2017/05/04 PHP
php7 安装yar 生成docker镜像
2017/05/09 PHP
JS原型对象通俗&quot;唱法&quot;
2012/12/27 Javascript
让元素在网页中可拖动示例代码
2013/08/13 Javascript
Javascript表格翻页效果实现思路及代码
2013/08/23 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
2014/10/30 Javascript
JavaScript面试开发常用的知识点总结
2016/08/08 Javascript
jQuery实现的自适应焦点图效果完整实例
2016/08/24 Javascript
javascript 正则表达式去空行方法
2017/01/24 Javascript
VUE2.0中Jsonp的使用方法
2018/05/22 Javascript
Javascript Symbol原理及使用方法解析
2020/10/22 Javascript
[00:34]TI7不朽珍藏III——纯金地穴编织者饰品展示
2017/07/15 DOTA
Python实现的Excel文件读写类
2015/07/30 Python
使用Mixin设计模式进行Python编程的方法讲解
2016/06/21 Python
python3解析库pyquery的深入讲解
2018/06/26 Python
用python生成1000个txt文件的方法
2018/10/25 Python
Python设计模式之命令模式原理与用法实例分析
2019/01/11 Python
对python中类的继承与方法重写介绍
2019/01/20 Python
树莓派动作捕捉抓拍存储图像脚本
2019/06/22 Python
详解canvas.toDataURL()报错的解决方案全都在这了
2020/03/31 HTML / CSS
采用专利算法搜索最廉价的机票:CheapAir
2016/09/10 全球购物
Three Graces London官网:英国奢侈品牌
2021/03/18 全球购物
Columbia Sportswear法国官网:全球户外品牌
2020/09/25 全球购物
Java的接口和C++的虚类的相同和不同处
2014/03/27 面试题
什么是规则表达式
2012/05/03 面试题
医学专业个人求职自荐信格式
2013/09/23 职场文书
2015学习委员工作总结范文
2015/04/03 职场文书
学校远程教育工作总结
2015/08/11 职场文书
2016年政治理论学习心得体会
2016/01/25 职场文书
教师个人教学反思
2016/02/23 职场文书
pytorch中的model=model.to(device)使用说明
2021/05/24 Python
Java中CyclicBarrier和CountDownLatch的用法与区别
2021/08/23 Java/Android