layui 复选框限制选择个数的方法

最新推荐文章于 2023-08-28 16:06:43 发布

转载最新推荐文章于 2023-08-28 16:06:43 发布 · 1.3k 阅读

3 ·

CC 4.0 BY-SA版权

原文链接：https://www.jb51.net/article/170296.htm

文章标签：

#layui #前端 #javascript

jq项目问题专栏收录该内容

14 篇文章

订阅专栏

此博客介绍了如何使用layui插件实现一个只能选择3项的复选框验证功能，通过监听checkbox事件确保用户不会超过限制。

<div class="layui-form-item">
  <div class="layui-inline">
    <input class="layui-input" type="checkbox" lay-skin="primary" lay-filter="pro" name="problem" value="1" title="问题1">
    <input class="layui-input" type="checkbox" lay-skin="primary" lay-filter="pro" name="problem" value="2" title="问题2">
    <input class="layui-input" type="checkbox" lay-skin="primary" lay-filter="pro" name="problem" value="3" title="问题3">
    <input class="layui-input" type="checkbox" lay-skin="primary" lay-filter="pro" name="problem" value="4" title="问题4">
    <input class="layui-input" type="checkbox" lay-skin="primary" lay-filter="pro" name="problem" value="5" title="问题5">
  </div>
</div>

//监听复选框，只能选择3个
form.on('checkbox(pro)',function(obj){  
  var len=$("input[name="problem"]:checked").length;
  if(len>3){
    $(obj.elem).next().attr("class","layui-unselect layui-form-checkbox");
    $(obj.elem).prop("checked",false);
    layer.msg('最多只能选3项！',{icon:5});
    return false;
  }
});

参考：

https://www.jb51.net/article/170296.htmhttps://www.jb51.net/article/170296.htm