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 DOM操作 基于命令改变页面
May 06 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
Jan 27 Javascript
制作jquery遮罩层效果导航菜单代码分享
Dec 25 Javascript
用Jquery.load载入页面实现局部刷新
Jan 22 Javascript
JavaScript中的getMilliseconds()方法使用详解
Jun 10 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
Sep 15 Javascript
jQuery插件 Jqplot图表实例
Jun 18 Javascript
详解Javascript中prototype属性(推荐)
Sep 03 Javascript
jQuery插件WebUploader实现文件上传
Nov 07 Javascript
Angular实现购物车计算示例代码
Feb 21 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
Apr 28 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
Jul 20 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为SHOPEX增加日志功能代码
2010/07/02 PHP
一个简单的网页密码登陆php代码
2012/07/17 PHP
使用PHPCMS搭建wap手机网站
2015/09/20 PHP
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
2009/06/14 Javascript
COM中获取JavaScript数组大小的代码
2009/11/22 Javascript
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
2011/08/09 Javascript
Javascript页面添加到收藏夹的简单方法
2013/08/07 Javascript
js控制frameSet示例
2013/09/10 Javascript
深入剖析JavaScript中的枚举功能
2014/03/06 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
2017/04/26 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
2018/01/31 Javascript
jquery实现动态添加附件功能
2018/10/23 jQuery
vue使用pdfjs显示PDF可复制的实现方法
2018/12/14 Javascript
Vue elementui字体图标显示问题解决方案
2020/08/18 Javascript
js用正则表达式筛选年月日的实例方法
2021/01/04 Javascript
Vue 实例中使用$refs的注意事项
2021/01/29 Vue.js
[58:21]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第二场
2018/04/04 DOTA
[40:27]完美世界DOTA2联赛PWL S3 PXG vs GXR 第一场 12.19
2020/12/24 DOTA
Python中List.count()方法的使用教程
2015/05/20 Python
使用Python爬取最好大学网大学排名
2018/02/24 Python
Python os.rename() 重命名目录和文件的示例
2018/10/25 Python
Python中出现IndentationError:unindent does not match any outer indentation level错误的解决方法
2020/04/18 Python
python实现将json多行数据传入到mysql中使用
2019/12/31 Python
利用Python裁切tiff图像且读取tiff,shp文件的实例
2020/03/10 Python
美国最大的电子宠物训练产品制造商:PetSafe
2018/10/12 全球购物
Europcar比利时:租车
2019/08/26 全球购物
Jack Rogers官网:美国经典的女性鞋靴品牌
2019/09/04 全球购物
水电工岗位职责
2014/02/12 职场文书
上班看电影检讨书
2014/02/12 职场文书
创建绿色学校先进个人材料
2014/08/20 职场文书
英语教育专业毕业生求职信
2014/08/28 职场文书
如何写贫困证明申请书
2014/10/29 职场文书
党的群众路线教育实践活动总结大会主持词
2014/10/30 职场文书
2014年小学教研工作总结
2014/12/06 职场文书
2015年小学远程教育工作总结
2015/07/28 职场文书
公文写作:教你写“建议书”
2019/05/07 职场文书