在Bootstrap中，按钮可以使用button标签或者a标签。设置按钮禁用可以通过两种方式，一种是通用CSS样式，一种是用过JS脚本动态设置，下面举例说明！

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Bootstrap设置按钮禁用</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script type="text/javascript">

        $(function() {

            $('#btn1').addClass('disabled'); //禁用 --变灰，依然可以调用点击事件

            $('#btn1').click(function() {

                alert('新增，复活了！');

            });

            $('#btn2').prop('disabled', true); //禁用 --变灰，且不能调用点击事件

            $('#btn2').click(function() {

                alert('删除，复活了！');

            });

            $('#btn3').click(function() {

                $('#btn1').removeClass('disabled'); //启用

            });

            $('#btn4').click(function() {

                $('#btn2').prop('disabled', false); //启用

            })

        });

    </script>

</head>

<body>

<div class="container">

    <h2>按钮</h2>

    <p> .btn-default 类是默认/标准按钮样式:</p>

    <!-- 方法一：CSS样式 -->

    <!-- <button type="button" class="btn btn-default disabled">默认</button> -->

    <!-- 方法二：JS脚本 -->

    <button id="btn1" type="button" class="btn btn-default">新增</button>

    <button id="btn2" type="button" class="btn btn-default">删除</button>

    <button id="btn3" type="button" class="btn btn-default">启用新增</button>

    <button id="btn4" type="button" class="btn btn-default">启用删除</button>

</div>

</body>

</html>

Bootstrap设置按钮禁用的更多相关文章

  1. Bootstrap系列 -- 20. 禁用状态

    Bootstrap框架的表单控件的禁用状态和普通的表单禁用状态实现方法是一样的,在相应的表单控件上添加属性“disabled” 在使用了“form-control”的表单控件中,样式设置了禁用表单背景 ...

  2. Swift-技巧（六）设置按钮状态并更改

    摘要 按钮是一个宝藏控件,可以在设置的时候就对不同的状态添加图片.文本,甚至更改背景.在不同的展示场景中更改到不同的状态显示就好.恰恰是如何更改状态着实让我懵了一阵,所以记录一下过程.如果没有兴趣了解 ...

  3. MFC 使用位图按钮，并且设置按钮的鼠标悬停效果

    系统环境:Windows 10软件环境:Visual C++ 2013 SP1本次目的:使用位图按钮,并且设置按钮的鼠标悬停效果 在用MFC开发时,界面是比较不好开发的一块.VC中自带了CBitmap ...

  4. vc设置按钮文字颜色

    设置按钮文字颜色使用 CMFCBUTTON即可 在OnInitDialog函数加入如下内容即可 ((CMFCButton*)GetDlgItem(IDC_MFCBUTTON1))->SetTex ...

  5. cocos2d 设置按钮不可用

    需要两步设置按钮变灰,然后不可点击 btnBuy.setBright(false); btnBuy.setTouchEnabled(false); 或者直接不显示按钮 btnBuy.setEnable ...

  6. jquery easyui-linkButton获取和设置按钮text并且解决火狐不支持innerText的方法

    <a href="javascript:test" id="btn" class="easyui-linkbutton" iconCl ...

  7. c#中设置按钮Button为透明

    方法一:代码实现 /// <summary> /// 设置透明按钮样式 /// </summary> private void SetBtnStyle(Button btn) ...

  8. android设置按钮按下的不同效果图

    <!-- 按钮设置按下去的不同效果的方式,设置android:background属性, 下面的 button_select实际上是button_select.xml --> <Bu ...

  9. Bootstrap -- 插件: 按钮状态、折叠样式、轮播样式

    Bootstrap -- 插件: 按钮状态.折叠样式.轮播样式 1. 按钮(Button)插件:可以添加进一些交互,比如控制按钮状态. 如需向按钮添加加载状态,只需要简单地向 button 元素添加 ...

随机推荐

  1. Python之模块介绍

    模块介绍 模块,是用一些代码实现的某个功能的代码集合. 类似与函数式编程和面向过程编程,函数式编程则完成一个功能,其他代码用来调用,提供了代码的重用性和代码间的耦合.对于一个复杂的功能,可能需要多个函 ...

  2. 我对sobel算子的理解

    转自:http://blog.csdn.net/yanmy2012/article/details/8110316 索贝尔算子(Sobeloperator)主要用作边缘检测,在技术上,它是一离散性差分 ...

  3. C#Dos命令

    记下 打开IIs:按Win+R键,输入inetmgr ; 远程桌面:按Win+R键,输入mstsc; 启动服务:按Win+R键,输入inetmgr; 删除某服务:sc delete [ServerNa ...

  4. 微软 Remote App

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://wangchunhai.blog.51cto.com/225186/201073 ...

  5. 3dmax导出缩放

    参考 http://blog.dou.li/unity3d-import-3dmax-model-scale.html http://blog.csdn.net/pdw_jsp/article/det ...

  6. 洛谷P1578 奶牛浴场

    P1578 奶牛浴场 题目描述 由于John建造了牛场围栏,激起了奶牛的愤怒,奶牛的产奶量急剧减少.为了讨好奶牛,John决定在牛场中建造一个大型浴场.但是John的奶牛有一个奇怪的习惯,每头奶牛都必 ...

  7. 洛谷P1633 二进制

    P1633 二进制 题目描述 有三个整数A.B.C,以下用N(2)表示N的二进制(没有前导0). 设A(2).B(2).C(2)的最大长度为L,你需要构造三个正整数X.Y.Z,满足以下条件: (1) ...

  8. 剑指Offer的学习笔记（C#篇）-- 求1+2+3+...+n

    题目描述 求1+2+3+...+n,要求不能使用乘除法.for.while.if.else.switch.case等关键字及条件判断语句(A?B:C). 一 . 直接解题吧 芽儿呦,突然觉得,我不说! ...

  9. Git 深度学习填坑之旅二（文件三种状态、打标签）

    0x01 三种状态 Git 有三种状态,你的文件可能处于其中之一: 已提交(committed).已修改(modified)和已暂存(staged). 已提交表示数据已经安全的保存在本地数据库中. 已 ...

  10. java 同时安装多版本问题（转）

    描述:刚到新公司,自己安装了jdk1.7和开发工具myeclipse10,但是由于公司项目的需要(具体原因不详细描述了),需要使用myeclipse6.5和jdk1.6.于是在切换jdk1.7和jdk ...