layui 关于checkbox 无法发选中的问题

使用layui进行快速开发时有时会遇到点击checkbox控件后再次点击的问题,在说明问题之前确保你有正确的引入layui的脚本文件以及脚本控件中的form控件。

checkbox、select、 radio控件依赖于layui的form模块,没有引入或正确引入只会导致这部分出现的位置出现空白现象,意思是,这几个控件被css隐藏了。使用框架进行布局开发,意味着你的布局语法要遵循框架的语法进行开发,举个例子来说明出现的问题吧

<input type="checkbox" value="1" id="all" title="全选" />

上面的代码仅仅是在html中任意位置都可以触发点击和取消的效果,不会因为标签嵌套出现问题的,这个代码只是最普通的使用layui对checkbox美化

<div class="layui-form-item">
    <label class="layui-form-label">标签</label>
    <div class="layui-input-block">
        <!-- 存放input的盒子 -->
        <input type="checkbox" id="all" title="全选" >
    </div>
</div>

上面这张图是按照layui框架布局嵌套方式进行嵌套的,checkbox框也可以正常使用。下面这种嵌套方式开始出现问题了

<div class="layui-form-item">
    <label class="layui-form-label">标签</label>
    <div class="layui-input-block">
        <label><input type="checkbox" id="all" title="全选" /></label>
    </div>
</div>

经过测试 多个常用标签测试,layui的checkbox 只在label标签下会出现这种情况。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值