解决 layui 在弹窗 layer 表单 form 的下拉框,单选框,复选框渲染失效的问题

一:必须给表单体系所在的父元素加上 class="layui-form"

在一个容器中设定 class="layui-form"  来标识一个表单元素块,通过规范好的 HTML 结构及 CSS 类,来组装成各式各样的表单元素,并通过内置的 form 模块来完成各种交互。

必须要在外层容器中定义 class="layui-form",form 模块才能正常工作。

<form class="layui-form">
    <!-- 这里是form里面的代码 输入框,选择框、复选框,单选框等等 -->
</form>

提示:你必须给表单体系所在的父元素加上 class="layui-form",如果你不想用 form,你可以换成 div 等任何一个普通元素

二: 调用依赖加载模块:form

依赖加载模块:form (请注意:如果不加载form模块,select、checkbox、radio等将无法显示,并且无法使用 form 相关功能)

<script>
layui.use('form', function(){
  var form = layui.form;
});
</script>

 三:更新渲染

有些时候,你的有些表单元素可能是动态插入的。这时 form 模块 的自动化渲染是会对其失效的。虽然layui不支持双向绑定机制,但没有关系,你只需要执行 form.render(type, filter); 方法即可。

第一个参数:type,为表单的 type 类型,可选。默认对全部类型的表单进行一次更新。可局部刷新的 type 如下表:

参数(type)值描述
select刷新select选择框渲染
checkbox刷新checkbox复选框(含开关)渲染
radio刷新radio单选框框渲染

例:

form.render(); //更新全部
form.render('select'); //刷新select选择框渲染
//……

当我们用layer之后,记得调用更新渲染,即可解决选择框、复选框、单选框不渲染,不可点击的问题

例:

<div id="layer-test" style="display: none;">
  <form class="layui-form">
    <div class="layui-form-item">
      <label class="layui-form-label">复选框</label>
      <div class="layui-input-block">
        <input type="checkbox" name="CSDN" lay-filter="like" title="复选框一" value="dongsir">
        <input type="checkbox" name="CSDN" lay-filter="like" title="复选框二" value="董先生">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">开关关</label>
      <div class="layui-input-block">
        <input type="checkbox" name="switch" lay-skin="switch" value="董辉">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">开关开</label>
      <div class="layui-input-block">
        <input type="checkbox" name="switch" checked lay-skin="switch" value="董先生的CSDN">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
      </div>
    </div>
  </form>
</div>
<script src="layui/layui.js"></script>
<script>
layui.use('form', function(){
  var form = layui.form,
      $ = layui.$;

    //layer示例

    layer.open({
        type: 1,
        title: ['董先生的CSDN博客'],
        shade: 0.4,
        area:['900px', '650px'],
        content: $("#layer-test").html(),
        success: function(layero, index){
          form.render();
        }
    });
});
</script>

 

文章推荐:

 

参考:

表单模块文档 - layui.form

 

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐