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 个选项。
相关推荐
周凡123几秒前
AI 时代的 Web JavaScript 逆向分析实践与思考
前端·javascript·人工智能
jerryinwuhan5 分钟前
marker BiBERTo解释
java·前端·人工智能
zhoumeina9914 分钟前
分段创建产品,tab 页切换又要保留缓存
前端·javascript
SilentSamsara14 分钟前
命令行工具开发:Click/Typer + 打包为独立二进制
linux·服务器·开发语言·前端·python·青少年编程·fastapi
恋猫de小郭18 分钟前
能在手机本地跑的图像生成模型 Bonsai Image ,效果还不错
前端·aigc·ai编程
Bigger19 分钟前
实战:搭建 AI Code Review 自动化流水线
前端·ci/cd·自动化运维
IT_陈寒25 分钟前
被Vite的HMR坑惨了,原来这样配置才能用对!
前端·人工智能·后端
The Sheep 202327 分钟前
EFcore 查询数据
java·javascript
怕浪猫31 分钟前
Electron 开发实战(七):网络通信与 API 集成全解
前端·javascript·electron
凌览34 分钟前
为什么我不推荐一人公司用PostgreSQL
前端·后端·node.js