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 相关文章推荐
数组Array进行原型prototype扩展后带来的for in遍历问题
Feb 07 Javascript
自己整理的一个javascript日期处理函数
Oct 16 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
Mar 25 Javascript
JS锚点的设置与使用方法
Sep 05 Javascript
原生js实现无缝轮播图效果
Jan 11 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
Feb 27 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
Dec 07 Javascript
js中Object.defineProperty()方法的不详解
Jul 09 Javascript
JS module的导出和导入的实现代码
Feb 25 Javascript
微信小程序动态添加view组件的实例代码
May 23 Javascript
js实现指定时间倒计时效果
Aug 26 Javascript
在vue中动态修改css其中一个属性值操作
Dec 07 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执行速度全攻略(下)
2006/10/09 PHP
PHP 和 MySQL 基础教程(四)
2006/10/09 PHP
PHP学习笔记(一) 简单了解PHP
2014/08/04 PHP
Linux中为php配置伪静态
2014/12/17 PHP
php使用GD创建保持宽高比缩略图的方法
2015/04/17 PHP
PHP封装返回Ajax字符串和JSON数组的方法
2017/02/17 PHP
Laravel5.5 手动分页和自定义分页样式的简单实现
2019/10/15 PHP
JavaScript 私有成员分析
2009/01/13 Javascript
JS 时间显示效果代码
2009/08/23 Javascript
Struts2的s:radio标签使用及用jquery添加change事件
2013/04/08 Javascript
JQuery1.8 判断元素是否绑定事件的方法
2014/07/10 Javascript
JavaScript数值转换的三种方式总结
2014/07/31 Javascript
js父页面与子页面不同时显示的方法
2014/10/16 Javascript
简单谈谈javascript Date类型
2015/09/06 Javascript
nodeJs内存泄漏问题详解
2016/09/05 NodeJs
深入理解jquery中extend的实现
2016/12/22 Javascript
详解搭建es6+devServer简单开发环境
2018/09/25 Javascript
使用electron将vue-cli项目打包成exe的方法
2018/09/29 Javascript
element-ui多文件上传的实现示例
2019/04/10 Javascript
angularjs自定义过滤器demo示例
2019/08/24 Javascript
vue v-for直接循环数字实例
2019/11/07 Javascript
[00:03]DOTA2新版本PA至宝展示
2014/11/19 DOTA
Python实现购物车购物小程序
2018/04/18 Python
Python3标准库之functools管理函数的工具详解
2020/02/27 Python
如何利用Python动态模拟太阳系运转
2020/09/04 Python
深入了解canvas在移动端绘制模糊的问题解决
2019/04/30 HTML / CSS
银行毕业实习自我鉴定
2013/09/19 职场文书
幼儿园保育员责任书
2014/07/22 职场文书
群众路线教育实践活动学习笔记
2014/11/05 职场文书
2014年业务员工作总结范文
2014/11/17 职场文书
表扬稿格式范文
2015/01/16 职场文书
工作检讨书大全
2015/01/26 职场文书
2015年大学生入党自荐书
2015/03/24 职场文书
好员工观后感
2015/06/17 职场文书
2016秋季小学开学寄语
2015/12/03 职场文书
MySQL慢查询中的commit慢和binlog中慢事务的区别
2022/06/16 MySQL