js控制关闭layui的switch开关

 

1、监听开关事件方法，鼠标控制开关触发

  <input class="switchbtn" id="switchbtn" type="checkbox" lay-filter="setcall_isrun" name="set_isrun" lay-skin="switch" lay-text="开启|关闭">
   
var switchdata;//呼叫台开关data
//监听开关事件   lay-filter是setcall_isrun
    form.on('switch(setcall_isrun)', function (data) {
        switchdata = data;
        var switchstate = data.elem.checked;//判断开关状态   开true  关false
        if (switchstate == true) {
            start();
        } else {
            hangup();//挂断
        }
    });

 

 2、通过其他方式控制switch开关，通过满足条件触发

     满足一定条件控制switch开或关

if (条件) {
    //调用相应开关开启方法
}
else {
    //修改switch开关为关闭状态 switchdata是从上面的form.on方法中获取得到
    var em = $(switchdata.othis[0]);
    //此下只是控制了switch的样式为关闭的样式
    switchdata.othis[0].classList.remove('layui-form-onswitch');
    em.children('em').text('关闭');
    //设置switch为关闭状态--这步必须，这步才真正表示switch为关闭
    switchdata.elem.checked = false;
    return;
}

参考逻辑一：

<input class="switch" type="checkbox" lay-skin="switch" lay-filter="mode" lay-text="开|关">
<script type="text/javascript">
    layui.use('form', function () {
        var form = layui.form;
        //开关
        form.on('switch(mode)', function (data) {
         var swithcData = data;
            var status = 0;
            if (!data.elem.checked) {
                status = 1;
            }
            var json = {"id":{$vo.id},"status": status};
            $.post("后端请求地址", json, function (data) {
                    if(data!=null){
                    mui.alert('该支付通道已关闭，暂时无法使用', '提示');
                    //修改switch开关为关闭状态
                    var em = $(swithcData.othis[0]);
                    swithcData.othis[0].classList.remove('layui-form-onswitch');
                    em.children('em').text('关');
                }
            });
        });
    });

 参考逻辑二：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="static/layui/css/layui.css">
</head>
<body>
<form class="layui-form" action="">
    <div class="layui-form-item">

        <div class="layui-input-block">
            <input type="checkbox" name="zzz" lay-skin="switch" lay-filter="switchTest" lay-text="开启|关闭">
        </div>
    </div>
</form>
<script src="static/layui/layui.js"></script>

<script>
    //Demo
    layui.use(['form','jquery','layer'], function () {
        var form = layui.form;
        var jquery = layui.jquery;
        var layer = layui.layer;

        //监听提交
        form.on('switch(switchTest)', function (data) {
            console.log(data.elem); //得到checkbox原始DOM对象
            console.log(data.elem.checked); //开关是否开启，true或者false
            console.log(data.value); //开关value值，也可以通过data.elem.value得到
            console.log(data.othis); //得到美化后的DOM对象
            var x=data.elem.checked;
            layer.open({
                content: 'test'
                ,btn: ['确定', '取消']
                ,yes: function(index, layero){
                    data.elem.checked=x;
                    form.render();
                    layer.close(index);
                    //按钮【按钮一】的回调
                }
                ,btn2: function(index, layero){
                    //按钮【按钮二】的回调
                    data.elem.checked=!x;
                    form.render();
                    layer.close(index);
                    //return false 开启该代码可禁止点击该按钮关闭
                }
                ,cancel: function(){
                    //右上角关闭回调
                    data.elem.checked=!x;
                    form.render();
                    //return false 开启该代码可禁止点击该按钮关闭
                }
            });
            return false;
        });
    });
</script>
</body>
</html>

 

posted @ 2023-03-03 19:08  じ逐梦  阅读(1328)  评论(0)    收藏  举报