uni-app 的 checkbox-group 复选框 最多限制两个以及多个的选项

 

<checkbox-group @change="checkboxChange">
				<view class="select" v-for="(item,index) in items" :key="index">
					<view v-if="type=='0'">
						<checkbox style="margin-left: 40rpx;" :value="item.value" :disabled="item.checked" />
					</view>
					<view :class="type == '0'?'type2':'type1'">
						<view class="selectxibox">
							<text class="selectx1">{{item.name}}</text>
							<text
								class="selectx2">{{item.disabled.replace(/^(.{4})(?:\d+)(.{4})$/,"$1******$2")}}</text>
						</view>
						<view class="sebox">
							<image class="seboximg" src="/static/application/res.png" mode="" @click="rdelete(index)">
							</image>
						</view>
					</view>
				</view>
			</checkbox-group>

connt: 2,//需要限制的大小
				items: [{
						value: 'CHN',
						name: '中国',
						disabled: '1111111111111111111',
						checked: false
					},
					{
						value: 'USA',
						name: '美国',
						disabled: '1111111111111111111',
						checked: false
					},
					{
						value: 'UScA',
						name: '美的国',
						disabled: '1111111111111111111',
						checked: false
					},
				],
				type: ""

checkboxChange: function(e) {
				console.log(e.detail.value, 'd')

				let valueList = this.items.map(item => item.value); //将数据中的value取出  也就是e.detail.value中的值
				let arr = [] // 声明一个数组 存放 未被选中的
				valueList.forEach(item => {
					if (!e.detail.value.includes(item)) { // 将未被选中的添加到arr数组中
						arr.push(item)
					}
				})
				var items = this.items,
					values = e.detail.value;
				
				if (e.detail.value.length  == this.connt) { // 如果已选中的长度 == 限制的值
					for (let i in this.items) { // 循环全部数据
						for (let j in arr) { // 循环未被选中的数据
							if (this.items[i].value === arr[j]) {
								this.items[i].checked = true;
							}
						}
					}
				} else {
					for (let i in this.items) {
						this.items[i].checked = false;
					}
				}
			},

.type1 {
		width: 630rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 40rpx 0 0;
	}

	.type2 {
		width: 550rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.topbox2 {
		height: 100vh;
		padding: 0 40rpx;

		.addpar {
			width: 670rpx;
			height: 6vh;
			background-color: #fff;
			box-shadow: 1rpx 5rpx 15rpx #e1e1e1;
			border-radius: 20rpx;
			margin-top: 3vh;
			display: flex;
			align-items: center;
			justify-content: center;

			.addparimg {
				width: 50rpx;
				height: 50rpx;
			}

			.addpartext {
				color: #f5852f;
				margin-left: 20rpx;
			}
		}

		.select {
			width: 670rpx;
			height: 9vh;
			background-color: #fff;
			box-shadow: 1rpx 5rpx 15rpx #e1e1e1;
			margin-top: 3vh;
			border-radius: 20rpx;
			display: flex;
			align-items: center;

			.selectimg {
				width: 50rpx;
				height: 50rpx;
				margin-left: 30rpx;
			}

			.selectxibox {
				display: flex;
				flex-direction: column;
				margin-left: 40rpx;

				.selectx1 {
					font-size: 30rpx;
				}

				.selectx2 {
					margin-top: 10rpx;
					font-size: 28rpx;
					color: #b6b6b6;
				}
			}

			.sebox {
				.seboximg {
					width: 50rpx;
					height: 50rpx;
					position: relative;
					z-index: 100000;
				}
			}
		}
	}

	// 
	.topbox1 {
		height: 85vh;
		padding: 0 40rpx;

		.addpar {
			width: 670rpx;
			height: 6vh;
			background-color: #fff;
			box-shadow: 1rpx 5rpx 15rpx #e1e1e1;
			border-radius: 20rpx;
			margin-top: 3vh;
			display: flex;
			align-items: center;
			justify-content: center;

			.addparimg {
				width: 50rpx;
				height: 50rpx;
			}

			.addpartext {
				color: #f5852f;
				margin-left: 20rpx;
			}
		}

		.select {
			width: 670rpx;
			height: 9vh;
			background-color: #fff;
			box-shadow: 1rpx 5rpx 15rpx #e1e1e1;
			margin-top: 3vh;
			border-radius: 20rpx;
			display: flex;
			align-items: center;

			.selectimg {
				width: 50rpx;
				height: 50rpx;
				margin-left: 30rpx;
			}

			.selectxibox {
				display: flex;
				flex-direction: column;
				margin-left: 40rpx;

				.selectx1 {
					font-size: 30rpx;
				}

				.selectx2 {
					margin-top: 10rpx;
					font-size: 28rpx;
					color: #b6b6b6;
				}
			}

			.sebox {
				.seboximg {
					width: 50rpx;
					height: 50rpx;
					position: relative;
					z-index: 100000;
				}
			}
		}
	}