uni-app checkbox限制选中数量移除选中样式

<uni-popup ref="carType" type="bottom"><uni-card class="content-carType" title="所需车型" :is-full="true"><checkbox-group class="content-carType__checkbox-group" @change="carTypeChange"><label v-for="(item,index) in carTypes" :key="index"><checkbox:value="item.value":disabled="item.disabled":checked="item.checked"style="transform: scale(0.7);"/>{{item.value}}</label></checkbox-group></uni-card></uni-popup>

// 车型选中carTypeChange(e) {// 判断选中项长度是否超过指定长度if (e.detail.value.length > 3) {// 禁用其余复选框const checked = e.detail.value.toString();this.carTypes.forEach((element, index) => {// 不包含选中项时禁用组件if (checked.indexOf(element.value) == -1) {element.disabled = true;}});// 取出最后一位选中项的值const lastChecked = e.detail.value.pop();// 获取所有复选框标签的dom的集合const labels = document.getElementsByClassName("uni-label-pointer");// 判断选中项的标签labels.forEach(element => {if (element.innerText == lastChecked) {// 获取到选中项标签中关闭选中样式的集合const lastInput = element.getElementsByClassName("uni-checkbox-input");// 定时器延时清除,实时清除的话,dom元素还未生成setTimeout(() => {lastInput[0].classList.remove("uni-checkbox-input-checked");}, 100);}});// 提示用户toast.toast("最多选择3种车型");} else {// 还原复选框状态this.carTypes.forEach(element => {element.disabled = false;});}this.goods.car_type = e.detail.value;}

uni-app checkbox限制选中数量移除选中样式相关推荐

限定checkbox最多选中数量
一.概述: checkbox是我们在编写网页的时候经常使用的多选框,但是有些时候我们会限定最多选中的数量,如何限定呢? 下面这例子限定了最多选中两个元素,并且将这两个选中的源依次显示在一个文本框里: ...
切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
jquery复选框组清空选中的值_jQuery获取复选框被选中数量及判断选择值的方法详解...
这篇文章主要介绍了jQuery获取复选框被选中数量及判断选择值的方法,结合实例形式分析了jQuery操作复选框进行判定与统计的相关技巧,非常具有实用价值,需要的朋友可以参考下本文实例讲述了jQuer ...
HbuilderX:uni app踩坑之uView-ui
HbuilderX:uni app踩坑之uView-ui 最近在自学uniapp,想找一个ui框架提高一下学习和开发的效率,于是就网上冲浪,浪来浪去,最后选择了uView-ui这款.其实有些框架我是有 ...
jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等
jQuery操作复选框checkbox技巧总结 --- 设置选中.取消选中.获取被选中的值.判断是否选中等一.checked属性定义先了解下input标签的checked属性: 1.HTML &l ...
vant 验证手机号_【uni app】vant weapp的引入和部分详细调用（表单输入框、验证码、弹出层搭配选择器、地图）...
本次小程序的开发使用uni app+vant weapp,vant weapp如何引用和部分组件使用方法如下引入在github(https://github.com/youzan/vant-wea ...
uni app实现WIFI功能(只支持安卓APP)
uni app实现WIFI功能一.前言二.使用 uni-WIFI 三.使用h5+ api 一.前言最近需要在uniapp上实现WiFi功能,将个人的研究结果记录如下(都只支持安卓APP) 使用 ...
下拉框——把一个select框中选中内容移到另一个select框中遇到的问题
在使用jQuery实现把一个select框中选中内容移到另一个select框中功能时遇到了一个问题,就是点击按钮时内容可以到另一个select框中,但是到了另一个select框中的内容却很快闪退回原来 ...
uni app map 地图漂浮问题及方案
uni app map 地图漂浮问题及方案文章页有图片导致的问题,图片没加载出来,导致文章内容高度不固定,如果图片没加载出来,高度就是0,如果此时开始加载map,那么map就在那里加载,map原生 ...

uni-app checkbox限制选中数量移除选中样式

uni-app checkbox限制选中数量移除选中样式相关推荐

最新文章

热门文章

uni-app checkbox限制选中数量 移除选中样式

uni-app checkbox限制选中数量 移除选中样式相关推荐

最新文章

热门文章

uni-app checkbox限制选中数量移除选中样式

uni-app checkbox限制选中数量移除选中样式相关推荐