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 个选项。
相关推荐
八号当铺11 分钟前
使用 Figma Agent Kit:插件 + MCP + 还原 Skill,打通本地设计协作
前端·人工智能·ai编程
一心只读圣贤书20 分钟前
AI 辅助前端国际化实践:从文案梳理到多语言资源治理
前端
无责任此方_修行中29 分钟前
搓了一个国产大模型与 AI Agent 比价工具
前端·后端·ai编程
szephyr42 分钟前
腾讯云 ADP 智能体的 Skills 配置变更后没有走灰度,直接全量替换出了问题怎么定位?
java·前端·腾讯云·腾讯云adp
夏雪coding1 小时前
nginx SPA 回落把 CSS 变成了 HTML:一个返回 200 却让样式失效的坑
前端·nginx
光影少年1 小时前
React Native网络、存储与原生能力
前端·react native·react.js
bonibabi1 小时前
基于 CopilotKit + Java SSE 构建 AI Agent 的前端实践指南
前端·agent
砺能1 小时前
谷歌浏览器中出现部分字体乱码问题
前端
To_OC1 小时前
绕开层层 props 搬运:我把 useContext 和自定义 Hook 跑通了
前端·react.js·前端框架
北凉温华1 小时前
Vue3 可视化打印设计插件|拖拽生成票据/标签打印模板(开源体验版)
前端