Bootstrap中点击按钮后变灰并显示加载中实例代码

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中点击按钮后变灰并显示加载中实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Bootstrap按钮功能之查询按钮和重置按钮

    Bootstrap按钮功能之查询按钮和重置按钮

    Bootstrap按钮功能之查询按钮和重置按钮 1.问题背景 一般情况下,查询列表有查询条件.查询按钮和重置按钮,输入查询条件,点击查询按钮查询列表等数据:点击重置按钮会将查询条件恢复到原始状态 2.实现源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Bootstrap-查询按钮和重置按钮</title> <link rel=&qu

  • BootStrap实现带关闭按钮功能

    BootStrap实现带关闭按钮功能

    说明 通过使用一个象征关闭的图标,可以让模态框和警告框消失 示例 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport&quo

  • 基于Bootstrap重置输入框内容按钮插件

    基于Bootstrap重置输入框内容按钮插件

    当好在输入框中输入一些内容之后,如果想清除这些内容,可以直接点击输入框右侧的小圆叉按钮即可.  text  password  email  url  search  tel  number  datetime 使用方法 使用该重置input输入框内容插件要引入jQuery和Bootstrap文件以及jquery.bootstrap-pureClearButton.js文件. <link rel="stylesheet" href="https://maxcdn.boo

  • BootStrap中按钮点击后被禁用按钮的最佳实现方法

    Bootstrap中点击后禁用按钮与js有什么区别呢要如何来实现呢,今天我们就一起来看一篇关于Bootstrap中点击后禁用按钮的最佳方法,具体的例子如下所示． 为了防止在Bootstrap中点击按钮多次提交,所以希望点击按钮后禁用按钮. 具体实现方法如下: //禁用button $('button').addClass('disabled'); // Disables visually $('button').prop('disabled', true); // Disables visual

  • bootstrap与Jquery UI 按钮样式冲突的解决办法

    bootstrap与Jquery UI 按钮样式冲突的解决办法

    参考: http://getbootstrap.com/javascript/ 今天在写页面的时候, 遇到一个问题, 页面上 要同时使用Jquery UI的弹出框, 又要用 bootstrap 的popover 结果, 弹框的button 就变成这个样子了. 网上查了下, 需要在JS开始的地方 添加两行代码. bootstrapButton = $.fn.button.noConflict(); $.fn.bootstrapBtn = bootstrapButton; 添加完, 刷新页面就正常了

  • BootStrap给table表格的每一行添加一个按钮事件

    1.在列属性中加入事件 { title:'数据量序号', field:'sjid' // hidden:true },{ field: 'operate', title: '操作', width: '80px', events: operateEvents, formatter: operateFormatter } 2.写一个函数 function operateFormatter(value, row, index) { return [ '<input type="submit&qu

  • Bootstrap复选框和单选按钮美化插件(推荐)

    Bootstrap复选框和单选按钮美化插件(推荐)

    官网地址 需要引入awesome-bootstrap-checkbox.css.font-awesome.css以及font awesome对应的字体font文件,可在上面的网站上下载. checkboxs的样式 radio的样式 radio样式 只要引入上面所说的文件之后,也可以自己定制样式,代码如下: .checkbox label::before { content: ""; display: inline-block; position: absolute; width: 20

  • 第三章之Bootstrap 表格与按钮功能

    Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 学习要点: 1.表格 2.按钮 本节课我们主要学习一下 Bootstrap 表格和按钮功能,通过内置的 CSS 定义,显示各种丰富的效果. 一．表格 Bootstrap 提供了一些丰富的表格样式供开发者使用. 1.基本格式 //实现基本的表格样式 <table class="table"> 注:

  • Bootstrap中点击按钮后变灰并显示加载中实例代码

    Bootstrap插件非常的好用了,我们今天一起来看一篇关于Bootstrap实现点击按钮之后按钮变成不可点击的一个效果了,具体的如下所示． 1.在按钮中加入data-loading-text,即点击按钮后显示的文字 <button type="submit" class="btn btn-primary btn-check" data-loading-text="提交中...">添加成员</button> 2.当点击按钮

  • JavaScript实现点击按钮后变灰避免多次重复提交

    注册的时候需要发送验证激活帐号的邮件,为了避免邮件的多次重复发送,所以可以在点击了发送后,设置button要过一段时间才能继续点击.下面是一个简单的例子: 复制代码 代码如下: <html> <head> <title>点击获取验证码按钮后按钮变灰,倒计时一段时间后又可重复点击</title> </head> <body> <input type="button" id="btn" val

  • js点击文本框后才加载验证码实例代码

    经常到各大网站去留言或者发帖的朋友应该知道现在很多网站的留言地方的验证码不是直接显示的.而是在点击验证码输入框之后才会显示出来验证码的.下面作者也总结了一篇关于如何利用js实现点击文本框然后再加载验证码的效果的. 废话不多说了,下面是具体的实现代码. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title

  • vue组件中点击按钮后修改输入框的状态实例代码

    vue组件中点击按钮后修改输入框的状态实例代码

    最近写一个这样的页面 要求点击修改按钮之后部分输入框由禁用状态变为可用状态.我使用了vue中的事件处理器,但是不知道怎么获取disabled这个属性的值,所以以失败告终.后来又使用了vue中的v-bind,使其与class或者style绑定,但是也没有作用 <el-input id = "usernames" v-model="form.username" v-bind:style = {"disabled:isDisabled"}>

  • Android中AlertDialog 点击按钮后不关闭对话框的功能

    Android中AlertDialog 点击按钮后不关闭对话框的功能

    这里的问题:当我点击确定按钮,也就是 AlertDialog 里的 PositiveButton 的时候,我们需要判断用户是输入是否符合我们的预期,如果不符合通常提示用户重写输入,且不关闭当前的对话框,但上图中点击按钮后会自动的关闭窗口. 先看原来的这个是怎么写的: private void openDialog() { LinearLayout linearLayout = (LinearLayout) LayoutInflater.from(getContext()).inflate(R.l

  • BootStrap点击保存后实现模态框自动关闭的思路(模态框)

    BootStrap点击保存后实现模态框自动关闭的思路(模态框)

    需求如下: 在弹出的模态框中点击 "更换" 按钮后 实现模态框自动关闭, 做法: 给"更换"按钮加上:data-dissmiss="modal" <button type="button" class="btn btn-primary btn-sm"data-dismiss="modal" >更换</button> 总结 以上所述是小编给大家介绍的BootStra

  • JavaScript点击按钮后弹出透明浮动层的方法

    本文实例讲述了JavaScript点击按钮后弹出透明浮动层的方法.分享给大家供大家参考.具体分析如下: 这里实现点击后页面变灰色,并用JS弹出一个居中的浮动层提示窗口,这个窗口是透明的,可以设置透明度,网上已经有很多类似的JavaScript代码,你可以借鉴一下. <HTML> <HEAD> <TITLE>浮动层居中的对话框效果演示</TITLE> <META http-equiv=Content-Type content="text/htm

  • 利用JS实现点击按钮后图片自动切换的简单方法

    我么常常看到一个网站的主界面的图片可以切换自如,那么又是如何实现的呢? 1.HTML页面布局如图所示: Main(div) top(div)(显示需要显示的图片) bottom UL (li)<选择>left center right 2.实现上述布局 swap.html <!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01 Strict//EN' 'http://www.w3.org/TR/html4/strict.dtd'> <html

  • javascript 点击整页变灰的效果（可做退出效果）。

    点击整页变灰的效果(可做退出效果). 注:页面头部必须加上 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 否则效果不能实现 <a href="#" onclick='return log_out()'>安全退出</a>

  • JS实现点击按钮后框架内载入不同网页的方法

    本文实例讲述了JS实现点击按钮后框架内载入不同网页的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&g

随机推荐