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 个选项。
相关推荐
用户691902681339几秒前
Agent 记忆处理机制详解:从变量数据类型到内存模型
javascript·架构
兄弟加油,别颓废了。7 分钟前
bugku题目
开发语言·前端·python
ShineWinsu7 分钟前
对于 Vue 3:开发前需要掌握的 JavaScript 核心基础:从变量、数组方法到 Promise、Async/Await 与 ES Module 的解析
javascript·vue.js·elasticsearch
西西小飞龙10 分钟前
npm vs pnpm
前端·npm·node.js
天天进步201515 分钟前
Pixelle-Video 源码解析 #17:TTS 语音生成:Edge-TTS、Index-TTS 如何接入?
前端·数据库
晴天1622 分钟前
Tsup:TypeScript库打包的“零配置极速方案”
前端·javascript·typescript
计算机魔术师29 分钟前
OpenAI 回应智能体接管德语维基网站事件,称将改革 AI 误对齐事件披露机制
前端
晴天1641 分钟前
PWA 让网页拥有原生应用的体验
前端·pwa
雪芽蓝域zzs41 分钟前
第十七节:面包屑导航组件(适配多级嵌套路由)
前端·javascript·vue.js