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 个选项。
相关推荐
isyuah1 分钟前
vite-plugin-openapi-ts CLI 使用指南
前端·vite
qq_3985865414 分钟前
浏览器中内嵌一个浏览器
前端·javascript·css·css3
Mapmost37 分钟前
地图引擎性能优化:解决3DTiles加载痛点的六大核心策略
前端
San30.1 小时前
Ajax 数据请求:从 XMLHttpRequest 到现代前端数据交互的演进
前端·ajax·交互
西西西西胡萝卜鸡1 小时前
虚拟列表(Virtual List)组件实现与优化铁臂猿版(简易版)
前端·vue.js
宇余1 小时前
Unibest:新一代uni-app工程化最佳实践指南
前端·vue.js
*小雪1 小时前
uniapp写H5授权登录及分享,返回到目标页面
开发语言·javascript·uni-app
性野喜悲1 小时前
ts+uniapp小程序时间日期选择框(分开选择)
前端·javascript·vue.js
你不是我我2 小时前
【Java 开发日记】SQL 语句左连接右连接内连接如何使用,区别是什么?
java·javascript·数据库
一壶浊酒..2 小时前
请求签名(Request Signature)
javascript