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 个选项。
相关推荐
平凡的阿泽2 分钟前
我用 Trae 实现了AI辩论赛
前端
对空六课7 分钟前
指标口径生效时间的版本查询实现
大数据·服务器·前端·算法·数据分析
对空六课11 分钟前
RFM分层边界变化的回溯计算
大数据·服务器·前端·数据库·人工智能·算法·数据分析
IT_陈寒16 分钟前
Vite打包的诡异行为,让我差点提交了个错误版本
前端·人工智能·后端
鹏多多17 分钟前
前端是如何死去的?| 完整时间线
前端·javascript·程序员
coding漫漫长路23 分钟前
海报挪进Worker画,canvas字体又变回默认了
前端
看浪的路人26 分钟前
第2讲:ReAct 模式从零实现——不用框架,手写一个 Agent 内核
前端·react.js·前端框架
独孤九剑打醒他32 分钟前
【原创开源·航空终极篇】氢能航空动力升级:双燃料掺氢、富氧补气与露天储氢安全模型
前端·架构·开源·硬件工程·能源
律宏阔35 分钟前
阿里云 ESA + Pages 域名部分电脑无法访问
前端
Lank_M40 分钟前
canvas 第一次画字没用上字体,字体却是它要来的
前端