bootstrap-switch,切换触发事件及动态切换以及readonly属性设置

逃离我推掉我的手 2022-11-25 10:16 188阅读 0赞

注意不能再<input type="checkbox" name="switch">中添加readonly或者disabled属性

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
        <link href="https://cdn.bootcss.com/bootstrap-switch/3.3.4/css/bootstrap3/bootstrap-switch.css" rel="stylesheet">
        <style>
            .center{
                text-align: center;
                margin-top: 100px;
            }
            #state{
                font-size: 20px;
                color: black;
                font-family: "Adobe 黑体 Std R";
                font-weight: bold;
            }
            .btn{
                width: 60px;
            }
        </style>
    </head>
    <body>
        <div class="center">
            <input type="checkbox" name="switch">
            <p id="state"></p><br>
            <button type="button" class="btn btn-primary" id="on">on</button>
            <button type="button" class="btn btn-warning" id="off">off</button>
        </div>
    </body>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-switch/3.3.4/js/bootstrap-switch.js"></script>
    <script>
     
        $("input[name='switch']").bootstrapSwitch({
            onText: "开启",
            offText: "关闭",
            onSwitchChange: function (event, state) {
                //监听switch change事件，可以根据状态把相应的业务逻辑代码写在这里
                if (state == true) {
                    $("#state").html('switch turn no');
                    $(this).val("0");
                } else {
                    $("#state").html('switch turn off');
                    $(this).val("1");
                }
            }
        })
        //两个按钮点击动态切换bootsrap开关状态
        $("#on").click(function(e){
            $("input[name='switch']").bootstrapSwitch("state",true);
        })
     
        $("#off").click(function(e){
            $("input[name='switch']").bootstrapSwitch("state",false);
        })
    </script>
    </html>

如果有这样一个需求。根据某个值，去设置switch按钮的state后，并且想让其不可再点击滑动，可这样写。

// 每次执行js前先初始化readonly位false。如果没有这句，执行下面某个if语句后，另外一个if语句的readonly设置就无效了
    $("#status").bootstrapSwitch("readonly", false);
    
    if(data.data.status=='0'){
             
                $("#status").bootstrapSwitch("state", true);
                $("#status").bootstrapSwitch("readonly", true);
     }
    
     if(data.data.status=='1'){
                $("#status").bootstrapSwitch("state", false);
                $("#status").bootstrapSwitch("readonly", true);
      }

转载于[https://www.cnblogs.com/guofx/p/11198292.html][https_www.cnblogs.com_guofx_p_11198292.html]

[https_www.cnblogs.com_guofx_p_11198292.html]: https://www.cnblogs.com/guofx/p/11198292.html