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

最新推荐文章于 2024-08-21 19:39:31 发布

Start2019

最新推荐文章于 2024-08-21 19:39:31 发布

阅读量1.1k

点赞数

分类专栏： jq项目问题

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

版权

layui checkbox 前端验证多选限制数量

关键词由CSDN通过智能技术生成

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

14 篇文章 1 订阅

订阅专栏

<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