mpvue中限制多选框最多只能选两项

时间：2020-01-06 11:27:16 阅读：79 评论：0 收藏：0 [点我收藏+]

每次点击的时候判断多选框选中的个数如果已经选中两个将所有未选中的项禁用

<checkbox-group class="radio-group" @change="checkChange">

</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

}

})

}

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>

mpvue中限制多选框最多只能选两项

原文：https://www.cnblogs.com/ginelle/p/12155051.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)