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 分钟前
Python项目实战经验分享:为什么你的多进程日志会丢失?
前端·人工智能·后端
柳杉12 分钟前
让 AI 学会审美、建模和剪片:我收藏夹里的 14 个仓库
前端·ai编程·three.js
前端架构师-老李17 分钟前
HTML与CSS基础第七课—HTML 中的a标签(跳转链接)
前端·css·html
陈随易1 小时前
一个网吧网管,做了个网页,卖了 5000 万
前端·后端·程序员
jktantan9 小时前
Vue keep-alive 切标签后滚动位置回顶?因为 onDeactivated 里读到的 scrollTop 是 0
前端·javascript·vue.js
总要学点什么10 小时前
第89篇:三维特效-螺旋圆效果——让螺旋臂卷起一圈圈外扩的涟漪
开发语言·javascript·ecmascript·webgl·cesium·空间分析·1024程序员节
2601_9628857210 小时前
quotes 字段全解:涨跌幅、振幅、换手率的口径与单位
java·前端·spring
excel11 小时前
encodeURI 和 encodeURIComponent 有什么区别?
前端
前端精髓11 小时前
调用openrouter的免费API模型
java·前端·javascript
赛博守夜人11 小时前
AI安全攻防与治理之十四:AI 安全测试不能脱离传统安全,Web、API、移动端与模型攻击面的组合拳
前端·人工智能·安全