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 相关文章推荐
扩展String功能方法
Sep 22 Javascript
JS模拟的QQ面板上的多级可展开的菜单
Oct 10 Javascript
javascript倒计时功能实现代码
Jun 07 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
Nov 21 Javascript
当某个文本框成为焦点时即清除文本框内容
Apr 28 Javascript
jQuery随机密码生成的方法
Mar 09 Javascript
JavaScript将数字转换成大写中文的方法
Mar 23 Javascript
Vue实现点击显示不同图片的效果
Aug 10 Javascript
如何解决日期函数new Date()浏览器兼容性问题
Sep 11 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
Nov 20 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
Mar 17 Javascript
测量JavaScript函数的性能各种方式对比
Apr 27 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 的加密函数 md5,crypt,base64_encode 等使用介绍
2012/04/09 PHP
PHP zip扩展Linux下安装过程分享
2014/05/05 PHP
Php-Redis安装测试笔记
2015/03/05 PHP
分享php分页的功能模块
2015/06/16 PHP
javascript setTimeout和setInterval 的区别
2009/12/08 Javascript
jquery操作复选框checkbox的方法汇总
2015/02/05 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
2015/07/31 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
2016/11/16 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
2017/06/30 Javascript
基于iScroll实现下拉刷新和上滑加载效果
2017/07/18 Javascript
浅谈angular4 ng-content 中隐藏的内容
2017/08/18 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
2017/12/12 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
2018/03/20 Javascript
react实现antd线上主题动态切换功能
2019/08/12 Javascript
vue 设置 input 为不可以编辑的实现方法
2019/09/19 Javascript
Layui tree 下拉菜单树的实例代码
2019/09/21 Javascript
javascript+Canvas实现画板功能
2020/06/23 Javascript
基于NodeJS开发钉钉回调接口实现AES-CBC加解密
2020/08/20 NodeJs
jquery插件实现轮播图效果
2020/10/19 jQuery
swiper实现导航滚动效果
2020/12/13 Javascript
Python实现抓取百度搜索结果页的网站标题信息
2015/01/22 Python
解密Python中的描述符(descriptor)
2015/06/03 Python
python正则表达式的使用
2017/06/12 Python
python用户管理系统的实例讲解
2017/12/23 Python
python爬虫 urllib模块反爬虫机制UA详解
2019/08/20 Python
Python图像处理模块ndimage用法实例分析
2019/09/05 Python
keras slice layer 层实现方式
2020/06/11 Python
世界上最大的专业美容用品零售商:Sally Beauty
2017/07/02 全球购物
全球立体声:World Wide Stereo
2018/09/29 全球购物
护士自荐信怎么写
2013/10/18 职场文书
大学自主招生自荐信
2013/12/16 职场文书
毕业论文评语大全
2014/04/29 职场文书
农村党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
详解Python 3.10 中的新功能和变化
2021/04/28 Python
健身房被搭讪?用python写了个小米计时器助人为乐
2021/06/08 Python
Redis过期数据是否会被立马删除
2022/07/23 Redis