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 相关文章推荐
csdn 博客中实现运行代码功能实现
Aug 29 Javascript
js中数组Array的一些常用方法总结
Aug 12 Javascript
简单的代码实现jquery定时器
Jan 03 Javascript
JS制作手机端自适应缩放显示
Jun 11 Javascript
js钢琴按钮波浪式图片排列效果代码分享
Aug 26 Javascript
详解WordPress开发中get_current_screen()函数的使用
Jan 11 Javascript
JavaScript判断用户名和密码不能为空的实现代码
May 16 Javascript
Bootstrap零基础入门教程(三)
Jul 18 Javascript
详解jQuery选择器
Dec 21 Javascript
Vue中使用canvas方法总结
Feb 12 Javascript
前后端常见的几种鉴权方式(小结)
Aug 04 Javascript
JavaScript实现答题评分功能页面
Jun 24 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
ecshop 订单确认中显示省市地址信息的方法
2010/03/15 PHP
php下使用strpos需要注意 === 运算符
2010/07/17 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
PHP+Redis 消息队列 实现高并发下注册人数统计的实例
2018/01/29 PHP
php的对象传值与引用传值代码实例讲解
2021/02/26 PHP
jquery 插件学习(五)
2012/08/06 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2013/08/12 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
2014/07/18 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
2016/04/12 Javascript
用jmSlip编写移动端顶部日历选择控件
2016/10/24 Javascript
JS实现的驼峰式和连字符式转换功能分析
2016/12/21 Javascript
深入理解Angularjs中的$resource服务
2016/12/31 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
2018/02/08 Javascript
bootstrap中selectpicker下拉框使用方法实例
2018/03/22 Javascript
在angular 6中使用 less 的实例代码
2018/05/13 Javascript
JS计算斐波拉切代码实例
2019/09/12 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
2020/03/16 Javascript
通过实例了解Render Props回调地狱解决方案
2020/11/04 Javascript
python 3利用BeautifulSoup抓取div标签的方法示例
2017/05/28 Python
Python入门学习指南分享
2018/04/11 Python
解决pycharm运行时interpreter为空的问题
2018/10/29 Python
pandas.dataframe按行索引表达式选取方法
2018/10/30 Python
python循环输出三角形图案的例子
2019/11/22 Python
Python 寻找局部最高点的实现
2019/12/05 Python
Spring实战之使用util:命名空间简化配置操作示例
2019/12/09 Python
css3的transition效果和transfor效果示例介绍
2013/10/30 HTML / CSS
香港士多网上超级市场:Ztore
2021/01/09 全球购物
毕业生求职简历的自我评价
2013/10/07 职场文书
机械设计毕业生自荐信
2014/02/02 职场文书
《十六年前的回忆》教学反思
2014/02/14 职场文书
2015社区健康教育工作总结
2015/05/20 职场文书
政协工作总结2015
2015/05/20 职场文书
同意转租证明
2015/06/24 职场文书
小学教师教学随笔
2015/08/14 职场文书
python基础之爬虫入门
2021/05/10 Python
MySql存储过程之逻辑判断和条件控制
2021/05/26 MySQL