mpvue中限制多选框最多只能选两项
每次点击的时候判断多选框选中的个数 如果已经选中两个 将所有未选中的项禁用
<template>
<checkbox-group class="radio-group" @change="checkChange">
<checkbox class="checkbox" :value='item.id' v-for="item in treatment" :key="item" :disabled='isDisabled[index]'>{{item.name}}</checkbox>
</checkbox-group>
</template>
import Vue from 'vue'
export default {
data () {
return {
personChange: [],
isDisabled: [],
checkId: []
}
},
methods:{
checkChange (e) {
this.personChance = e.target.value
for (let i = 0; i < this.checkId.length; i++) {
if (e.target.value.length >= 2 && !e.target.value.includes(this.checkId[i].toString())) {
Vue.set(this.isDisabled, i, true)
} else if (e.target.value.length < 2) {
Vue.set(this.isDisabled, i, false)
}
}
}
},
onLoad(){
wx.request({
url: '',
data: {},
success (res) {
console.log(res)
that.treatment = res.data.data
let isDisabled = []
let checkId = []
for (let i = 0; i < res.data.data.length; i++) {
isDisabled.push(false)
checkId.push(res.data.data[i].id)
}
that.isDisabled = isDisabled
that.checkId = checkId
}
})
}
<style lang="wxss">
label.checkbox {
padding-left: 20rpx;
}
checkbox .wx-checkbox-input{
width: 22rpx;
height: 22rpx;
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked{
border: 1rpx solid transparent;
background-color: #da2728;
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
width: 22rpx;
height: 22rpx;
line-height: 22rpx;
text-align: center;
font-size:22rpx;
color:#fff;
background: transparent;
transform: translate(-50%, -50%) scale(1);
-webkit-transform: translate(-50%, -50%) scale(1);
}
</style>
