layui 多选限制选择3个

可以使用 layui 的表单组件进行多选,然后通过 JavaScript 代码限制用户最多只能选择 3 个选项。具体的实现步骤如下:

  1. 在 layui 的表单组件中,使用多选框进行多选。
html 复制代码
<div class="layui-form-item">
  <label class="layui-form-label">多选框</label>
  <div class="layui-input-block">
    <input type="checkbox" name="like[]" value="1" title="写作">
    <input type="checkbox" name="like[]" value="2" title="阅读">
    <input type="checkbox" name="like[]" value="3" title="听音乐">
    <input type="checkbox" name="like[]" value="4" title="打游戏">
    <input type="checkbox" name="like[]" value="5" title="旅游">
  </div>
</div>
  1. 在 JavaScript 中监听多选框的变化,统计当前选中的选项数。
javascript 复制代码
// 监听多选框的变化
form.on('checkbox', function(data){
  var checked = $('input[name="like[]"]:checked').length;
  // 如果选择超过3个,则禁止选择
  if (checked > 3) {
    layer.msg('最多只能选择3个选项');
    $(data.elem).prop('checked', false);
    form.render('checkbox');
  }
});
  1. 如果用户选择的选项数超过 3,则禁止选择,并提示用户最多只能选择 3 个选项。
相关推荐
IT_陈寒4 分钟前
SpringBoot自动配置把我都整不会了
前端·人工智能·后端
最逗前端小白鼠1 小时前
vue3 数据响应式遇到的问题
前端·vue.js
倚栏听风雨1 小时前
ts中 ?? 和 || 区别
前端
冴羽1 小时前
请愿书:Node.js 核心代码不应该包含 AI 代码!
前端·javascript·node.js
我家猫叫佩奇1 小时前
一款灵感源自《集合啦!动物森友会》的 UI 组件库
前端
mmmmm123421 小时前
深入 DOM 查询底层:HTMLCollection 动态原理与 querySelectorAll 静态快照解析
前端·javascript
淸湫2 小时前
前端JavaScript:数据类型、实例对象 、内置对象、构造函数之间的关系
javascript
weixin199701080162 小时前
《TikTok 商品详情页前端性能优化实战》
前端·性能优化
闲坐含香咀翠2 小时前
告别二次登录!Web端检测并唤起Electron客户端实战
前端·客户端
岁月宁静2 小时前
都知道AI大模型能生成文本内容,那你知道大模型是怎样生成文本的吗?
前端·vue.js·人工智能