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 相关文章推荐
IE6/7/8中Option元素未设value时Select将获取空字符串
Apr 07 Javascript
jquery利用event.which方法获取键盘输入值的代码
Oct 09 Javascript
图片上传插件jquery.uploadify详解
Nov 15 Javascript
js函数模拟显示桌面.scf程序示例
Apr 20 Javascript
ArtEditor富文本编辑器增加表单提交功能
Apr 18 Javascript
javascript学习指南之回调问题
Apr 23 Javascript
mongoose更新对象的两种方法示例比较
Dec 19 Javascript
使用axios实现上传图片进度条功能
Dec 21 Javascript
Django+Vue跨域环境配置详解
Jul 06 Javascript
详解Angular中通过$location获取地址栏的参数
Aug 02 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
Oct 12 Javascript
vue 表单之通过v-model绑定单选按钮radio
May 13 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导入导出CSV文件
2014/11/03 PHP
[原创]PHP实现逐行删除文件右侧空格的方法
2015/12/25 PHP
yii2中添加验证码的实现方法
2016/01/09 PHP
Alliance vs AM BO3 第一场2.13
2021/03/10 DOTA
Javascript技术技巧大全(五)
2007/01/22 Javascript
jQuery EasyUI 的EasyLoader功能介绍
2010/09/12 Javascript
js检测网络是否具体连接功能的代码
2014/05/23 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
2015/09/04 Javascript
Vue.js之slot深度复制详解
2017/03/10 Javascript
关于前后端json数据的发送与接收详解
2017/07/30 Javascript
解决jquery appaend元素中id绑定事件失效的问题
2017/09/12 jQuery
安装Node.js并启动本地服务的操作教程
2018/05/12 Javascript
新手快速入门JavaScript装饰者模式与AOP
2019/06/24 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
2020/09/08 Javascript
Python中处理时间的几种方法小结
2015/04/09 Python
数据清洗--DataFrame中的空值处理方法
2018/07/03 Python
python基于itchat模块实现微信防撤回
2019/04/29 Python
python 实现围棋游戏(纯tkinter gui)
2020/11/13 Python
HTML5新增的表单元素和属性实例解析
2014/07/07 HTML / CSS
五个2015 年最佳HTML5 框架
2015/11/11 HTML / CSS
iHerb中文官网:维生素、保健品和健康产品
2018/11/01 全球购物
微软巴西官方网站:Microsoft Brasil
2019/09/26 全球购物
门卫岗位职责
2013/11/15 职场文书
关于保护环境的建议书
2014/05/13 职场文书
投资意向书
2014/07/30 职场文书
2014年机关党委工作总结
2014/12/11 职场文书
迟到检讨书范文
2015/01/27 职场文书
个人工作表现自我评价
2015/03/06 职场文书
宾馆前台接待岗位职责
2015/04/02 职场文书
婚礼迎宾词大全
2015/08/10 职场文书
高中优秀作文(范文)
2019/08/15 职场文书
Python pandas读取CSV文件的注意事项(适合新手)
2021/06/20 Python
一文搞懂Python Sklearn库使用
2021/08/23 Python
JavaScript利用html5新方法操作元素类名详解
2021/11/27 Javascript
A22国内电台短波广播频率表
2022/05/10 无线电
MySQL约束(创建表时的各种条件说明)
2022/06/21 MySQL