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 相关文章推荐
url地址自动加#号问题说明
Aug 21 Javascript
初窥JQuery(二)事件机制(2)
Dec 06 Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
Dec 12 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
Jul 20 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
May 09 Javascript
JS代码实现根据时间变换页面背景效果
Jun 16 Javascript
JavaScript日期对象(Date)基本用法示例
Jan 18 Javascript
JavaScript分步实现一个出生日期的正则表达式
Mar 22 Javascript
vue-router+nginx 非根路径配置方法
Jun 30 Javascript
Vue项目路由刷新的实现代码
Apr 17 Javascript
关于layui时间回显问题的解决方法
Sep 24 Javascript
浅谈关于vue中scss公用的解决方案
Dec 02 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
Apache+php+mysql在windows下的安装与配置图解(最新版)
2008/11/30 PHP
php导出word文档与excel电子表格的简单示例代码
2014/03/08 PHP
php中session使用示例
2014/03/29 PHP
ThinkPHP使用smarty模板引擎的方法
2014/07/01 PHP
PHP开发框架Laravel数据库操作方法总结
2014/09/03 PHP
PHP5.5新特性之yield理解与用法实例分析
2019/01/11 PHP
用JAVASCRIPT如何给&amp;lt;textarea&amp;gt;&amp;lt;/textarea&amp;gt;赋值
2007/04/20 Javascript
JavaScript 创建运动框架的实现代码
2013/05/08 Javascript
JavaScript中检测变量是否存在遇到的一些问题
2013/11/11 Javascript
jquery删除数据记录时的弹出提示效果
2014/05/06 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
2015/12/02 Javascript
jquery ui dialog替代confirm实例分析
2016/01/25 Javascript
浅析jQuery操作select控件的取值和设值
2016/12/07 Javascript
用jquery的attr方法实现图片切换效果
2017/02/05 Javascript
最全的JavaScript开发工具列表 总有一款适合你
2017/06/29 Javascript
JSON.stringify()方法讲解
2019/01/31 Javascript
JS实现马赛克图片效果完整示例
2019/04/13 Javascript
Vue+Element实现动态生成新表单并添加验证功能
2019/05/23 Javascript
浅谈react-router@4.0 使用方法和源码分析
2019/06/04 Javascript
js与jquery获取input输入框中的值实例讲解
2020/02/27 jQuery
详解微信小程序工程化探索之webpack实战
2020/04/20 Javascript
JS sort排序详细使用方法示例解析
2020/09/27 Javascript
[38:54]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第一场 11.28
2020/12/01 DOTA
记录Django开发心得
2014/07/16 Python
python 开发的三种运行模式详细介绍
2017/01/18 Python
解决PyCharm中光标变粗的问题
2017/08/05 Python
Python使用pyyaml模块处理yaml数据
2020/04/14 Python
Python3利用openpyxl读写Excel文件的方法实例
2021/02/03 Python
请介绍一下Ant
2016/07/22 面试题
垃圾回收的优点和原理
2014/05/16 面试题
资料员的岗位职责
2013/11/20 职场文书
ktv收银员岗位职责
2013/12/16 职场文书
2014年企业工会工作总结
2014/11/12 职场文书
毕业酒会致辞
2015/07/29 职场文书
学习计划是什么
2019/04/30 职场文书
CSS 鼠标点击拖拽效果的实现代码
2022/12/24 HTML / CSS