Bootstrap设置按钮禁用

最新推荐文章于 2020-12-10 10:42:38 发布

花开半夏凉城空╲ゞ夏雪

最新推荐文章于 2020-12-10 10:42:38 发布

阅读量4.9k

点赞数 1

分类专栏： Bootstrap

本文链接：https://blog.csdn.net/xiaxue168/article/details/88777106

版权

Bootstrap 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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>

花开半夏凉城空╲ゞ夏雪

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap设置按钮禁用

Bootstrap框架中，按钮可以使用button标签或者a标签。设置按钮禁用可以通过两种方式，一种是通用CSS样式，一种是用过JS脚本动态设置，下面举例说明！<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Bootstrap设置按钮禁用<...
复制链接

扫一扫