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 相关文章推荐
IE中直接运行显示当前网页中的图片 推荐
Aug 31 Javascript
JavaScript事件委托技术实例分析
Feb 06 Javascript
jquery实现的点击翻书效果代码
Nov 04 Javascript
JavaScript统计网站访问次数的实现代码
Nov 18 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
Jul 26 Javascript
jquery.validate表单验证插件使用方法解析
Nov 07 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
Jul 15 Javascript
JS验证码实现代码
Sep 14 Javascript
利用Node.js如何实现文件循环覆写
Apr 05 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
May 16 Javascript
微信小程序实现单个或多个倒计时功能
Nov 01 Javascript
vue+iview实现手机号分段输入框
Mar 25 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
一步一步学习PHP(1) php开发环境配置
2010/02/15 PHP
PHP中include和require的区别实例分析
2017/05/07 PHP
原生javascript获取元素样式属性值的方法
2010/12/25 Javascript
js复制网页内容并兼容各主流浏览器的代码
2013/12/17 Javascript
js实现的类似于asp数据字典的数据类型代码实例
2014/09/03 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
2014/09/10 Javascript
JavaScript String 对象常用方法详解
2016/05/13 Javascript
AngularJs基于角色的前端访问控制的实现
2016/11/07 Javascript
AngularJS实现网站换肤实例
2021/02/19 Javascript
Django+Vue跨域环境配置详解
2018/07/06 Javascript
JavaScript 高性能数组去重的方法
2018/09/20 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
2018/11/30 Javascript
javascript数组去重方法总结(推荐)
2019/03/20 Javascript
使用 node.js 模仿 Apache 小部分功能
2019/07/07 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
2019/12/29 Javascript
JavaScript实现横版菜单栏
2020/03/17 Javascript
在Vue 中获取下拉框的文本及选项值操作
2020/08/13 Javascript
微信小程序实现星星评分效果
2020/11/01 Javascript
绘制微信小程序验证码功能的实例代码
2021/01/05 Javascript
[03:09]显微镜下的DOTA2第一期——带你走进华丽的DOTA2世界
2014/06/20 DOTA
详谈python在windows中的文件路径问题
2018/04/28 Python
Python 字符串与数字输出方法
2018/07/16 Python
Python数据类型之Number数字操作实例详解
2019/05/08 Python
Python实现的对一个数进行因式分解操作示例
2019/06/27 Python
使用django的objects.filter()方法匹配多个关键字的方法
2019/07/18 Python
CSS3的first-child选择器实战攻略
2016/04/28 HTML / CSS
文员个人求职自荐信
2013/09/21 职场文书
父亲八十大寿答谢词
2014/01/23 职场文书
承认错误的检讨书
2014/01/30 职场文书
财务学生的职业生涯发展
2014/02/11 职场文书
小组口号大全
2014/06/09 职场文书
多媒体教室标语
2014/06/26 职场文书
科长个人四风问题整改措施思想汇报
2014/10/13 职场文书
幼儿园教师考核评语
2014/12/31 职场文书
羊脂球读书笔记
2015/06/30 职场文书
雄兵连:第三季先行图公开,天使恶魔联合,银河之力的新力量
2021/06/11 国漫