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 相关文章推荐
js实现运行代码需要刷新的解决方法
Aug 18 Javascript
javascript函数式编程实例分析
Apr 25 Javascript
js光标定位文本框回车表单提交问题的解决方法
May 11 Javascript
详细谈谈AngularJS的子级作用域问题
Sep 05 Javascript
js canvas仿支付宝芝麻信用分仪表盘
Nov 16 Javascript
Javascript中return的使用与闭包详解
Jan 11 Javascript
Vue实现选择城市功能
May 27 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
Oct 24 Javascript
解决vue init webpack 下载依赖卡住不动的问题
Nov 09 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
Nov 17 Vue.js
原生js实现自定义难度的扫雷游戏
Jan 22 Javascript
Vue3 Composition API的使用简介
Mar 29 Vue.js
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
从Web查询数据库之PHP与MySQL篇
2009/09/25 PHP
深入理解curl类,可用于模拟get,post和curl下载
2013/06/08 PHP
CI框架验证码CAPTCHA辅助函数用法实例
2014/11/05 PHP
php ajax实现文件上传进度条
2016/03/29 PHP
PHP编写的图片验证码类文件分享
2016/06/06 PHP
PHP  实现等比压缩图片尺寸和大小实例代码
2016/10/08 PHP
Smarty模板常见的简单应用分析
2016/11/15 PHP
PHP使用标准库spl实现的观察者模式示例
2018/08/04 PHP
php实现网页上一页下一页翻页过程详解
2019/06/28 PHP
PHP实现文件上传操作和封装
2020/03/04 PHP
使用js获取QueryString的方法小结
2010/02/28 Javascript
jQuery对Select的操作大集合(收藏)
2013/12/28 Javascript
js中数组(Array)的排序(sort)注意事项说明
2014/01/24 Javascript
JS面向对象编程详解
2016/03/06 Javascript
微信JS接口大全
2016/08/25 Javascript
JScript实现地址选择功能
2017/08/15 Javascript
VSCode使用之Vue工程配置eslint
2019/04/30 Javascript
VSCode搭建Vue项目的方法
2020/04/30 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
2020/07/31 Javascript
[25:45]2018DOTA2亚洲邀请赛4.5SOLO赛 Sylar vs Paparazi
2018/04/06 DOTA
从Python程序中访问Java类的简单示例
2015/04/20 Python
python3.6 实现AES加密的示例(pyCryptodome)
2018/01/10 Python
在IPython中执行Python程序文件的示例
2018/11/01 Python
django框架基于queryset和双下划线的跨表查询操作详解
2019/12/11 Python
Python callable内置函数原理解析
2020/03/05 Python
python实现爱奇艺登陆密码RSA加密的方法示例详解
2020/05/27 Python
Python延迟绑定问题原理及解决方案
2020/08/04 Python
英国太阳镜品牌:Taylor Morris Eyewear
2018/04/18 全球购物
线程的基本概念、线程的基本状态以及状态之间的关系
2012/10/26 面试题
应聘面试自我评价
2014/01/24 职场文书
美容院店长岗位职责
2014/04/08 职场文书
应届大专生求职信
2014/06/26 职场文书
学校食堂食品安全责任书
2014/07/28 职场文书
党的群众路线对照检查材料范文
2014/09/24 职场文书
工作能力自我评价2015
2015/03/05 职场文书
Vue提供的三种调试方式你知道吗
2022/01/18 Vue.js