layui switch赋值详解

一、switch简介

switch组件是layui的一个表单组件，常用于开关状态的展示和切换，也可以用于用户权限的开关等场景。

其中switch状态只有两种：开和关，开状态表示为“on”，关状态表示为“off”。

layui.use('form', function(){
  var form = layui.form;
 
  //监听指定开关
  form.on('switch(component-switch-test)', function(data){
    layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {
      offset: '6px'
    });
    layer.tips('温馨提示：请勿随意切换', data.othis)
  });
});

上述代码即为使用layui switch组件的示例代码，其中包含监听指定开关功能，监听switch开关状态变化的操作，以及提示信息的展示。

二、switch赋值方法

1.设置开关状态默认值

switch组件默认值为“off”，可以通过checked属性设置默认值为“on”。

<div class="layui-form-item">
  <label class="layui-form-label">默认开关</label>
  <div class="layui-input-block">
    <input type="checkbox" name="switch" lay-skin="switch" checked="">
  </div>
</div>

上述代码中，通过checked属性设置默认开关状态为打开（on）。

2.对switch进行赋值

可以使用jQuery的prop()方法来设置switch组件的状态，其中true表示开，false表示关。

 <label class="layui-form-label">是否加粗</label>
  <div class="layui-input-block">
    <input id="isBold" type="checkbox" name="bold" lay-skin="switch">
  </div>
 
  <script>
    $().ready(function() {
      var bold = $('#bold');
      bold.prop('checked', true); // 这里可以设置checked为true，开启switch
    });
  </script>

上述代码中，使用jQuery的prop()方法设置switch组件的状态，以此达到对switch进行赋值的目的。

三、switch组件常用API

1.渲染switch组件

可以使用form.render()方法来对switch组件进行渲染。该方法通常与form.on()方法与下面的代码一起使用。

layui.use('form', function(){
  var form = layui.form;
 
  //监听指定开关
  form.on('switch(component-switch-test)', function(data){
    layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {
      offset: '6px'
    });
    document.getElementById("demo").innerHTML = this.checked ? 'true' : 'false';
  });
  
  //渲染开关
  form.render('switch');
});

上述代码中，可以看到除了监听switch开关的操作外，还有一个渲染开关的操作，这个操作是为了使switch组件得到正常显示使用的。

2.禁用和启用switch组件

禁用和启用switch组件的方法其实就是通过prop(‘disabled’,bool)方法中的bool值进行控制的。当bool为true时，switch组件变为禁用状态，否则为启用状态。

layui.use(['form'], function () {
  var form = layui.form;
  form.on("switch(component-switch-test)", function (data) {
    console.log(data.elem.checked)
  });
  
  //禁用switch组件
  $('input[name="switch"]').prop('disabled', true);
});

上述代码展示了禁用switch组件的方法，其中通过$(‘input[name=”switch”]’).prop(‘disabled’, true)实现开关的禁用。

3.监听switch组件的变化

switch组件变化的代码可以通过监听switch的change事件来获取switch的值，比如当switch关闭时，可以通过监听获取switch的值时设置一个变量为false。

 layui.use(['form'], function () {
    var form = layui.form;
    form.on("switch(component-switch-test)", function (data) {
        var isChecked = data.elem.checked;
        console.log(isChecked);
        var text = isChecked ? '开启' : '关闭';
        layer.msg('服务已' + text);
    });
  
    //模拟到达一定条件，再关闭switch的操作
    setTimeout(function(){
        $('input[name="switch"]').click(); // 模拟点击，关闭switch
        
        // 当开关关闭时
        $('input[name="switch"]').change(function(){
            var isChecked = $(this).prop('checked');
            if(isChecked){
                return false; // 如果开关被选中就不再执行关闭操作
            }else{
                $('input[name="switch"]').prop('checked', false);
                console.log('已关闭switch！');
            }
        })
    },5000)
});

上述代码中，通过setTimeout()方法让代码执行到一定条件时再进行switch关闭操作，同时在switch关闭时通过监听switch的change事件获取switch的值。

四、结束语

本文对于layui switch组件的赋值已经做出详细的阐述，包括switch简介、switch赋值方法、switch组件常用API等多个方面的描述。读者朋友在使用layui switch时，可根据本文所述的知识点来进行对应操作，从而更好的使用switch组件。

原创文章，作者：DNETG，如若转载，请注明出处：https://www.506064.com/n/368984.html