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 个选项。
相关推荐
m0_敲代码的彭于晏1681 小时前
Vercel 前端部署平台深度评测
前端
怕浪猫3 小时前
外包和大厂的前端代码,差在凌晨三点
前端·面试·github
m0_敲代码的彭于晏1683 小时前
Vercel 前端部署与全栈开发实战指南
前端·状态模式
徐小夕3 小时前
花了3个月,我们做了一款 AI 版的“飞书文档”
前端·算法·github
贾伟康3 小时前
【化学实验室|17】HarmonyOS ArkTS 亮暗色与视觉令牌实战:集中颜色、间距和交互状态避免页面割裂
前端·移动开发·harmonyos·arkts·arkui
Csvn4 小时前
SSR/SSG/ISR(上):峡谷与渲染策略的时间预算
前端
Csvn4 小时前
SSR/SSG/ISR(下):可交互性、新鲜度与回源账
前端
酷炫码神5 小时前
Day 10|Pinia 状态管理:把散落在各组件的数据,收进一个全局仓库
android·开发语言·javascript
Elcker7 小时前
YnuoAgent(依诺):一个 npm 包,跑起属于自己的 AI 研发平台
前端·人工智能·npm
酷炫码神7 小时前
Day 8|Vue3 响应式:告别手动操作 DOM,让数据驱动界面
javascript·vue.js·ecmascript