uniapp复选框限制最大选中数

问卷答题,多选题做多选中两个

在这里插入图片描述
在这里插入图片描述

实现代码

由于我写的小程序,有单选,多选,填空等题型,只需要看多选部分就行了

<!-- 题目列表 -->
		<view class="topic-list">
			<view class="topic-list_box " v-for="(item,index) in paperDetail.questions" :key="index" ref="refs">
				<!-- 单选题 -->
				<view class="topic-list_item">
					<view class="topic-list_title">
						<view class="topic-list_title_f">
							<view>
								{{index + 1 +"."}}{{item.type == 0 ? "[单选题]":"[填空题]"}}{{item.problem}}
								<view class="tag_box" v-if="item.duo">
									<u-tag text="多选" size="mini" type="success" />
								</view>
							</view>
							<view class="num">
								{{item.grade + "分"}}
							</view>
						</view>

						<view class="err">
							<u-icon v-show="errIcon ==true" @click="goToFeedback(item)" name="error-circle-fill "
								color="#ff0004" size="38"></u-icon>
						</view>
					</view>
					<!-- 吉凶是否显示 -->
					<view class="luckybox" v-if="item.luckyStatus">
						<u-radio-group v-model="item.lucky">
							<u-radio v-for="(items, indexs) in luckyList" :key="indexs" :name="items.title"
								active-color="#c5a859" :disabled="false">
								{{ items.choice }}
							</u-radio>
						</u-radio-group>
					</view>
					<view class="topic-list_title_check" v-for="(j, jindex) in item.choices" :key="jindex">
						<!-- 单选题 -->
						<radio-group v-show="item.type == 0 && !item.duo" active-color="#c5a859">
							<label class="uni-list-cell uni-list-cell-pd">
								<view class="topic-list_title_check_list" @click="radioclick(j,jindex,index,item)">
									<view>
										<radio style="transform: scale(0.7);" color="#c5a859" :value="j.choice"
											:checked="item.isRight === j.isRight" />
									</view>
									<view>{{j.choice}}</view>
								</view>
							</label>
						</radio-group>
						<!-- 复选 -->
						<view class="checkbox_group_box" @click="change2(j, jindex, index, item)">
							<checkbox-group v-show="item.type == 0 && item.duo">
								<checkbox :value="j.choice" style="transform:scale(0.7)" color="#c5a859"
									:disabled="j.disabled" :checked="j.checkflg" shape="circle">
								</checkbox>
								<text class="chack_text">
									{{j.choice}}
								</text>
							</checkbox-group>
						</view>

					</view>

					<!-- 填空题 -->
					<view class="topic-list_referenceAnswer" v-if="item.type == 2">
						<view class="referenceAnswer">
							<input type="text" v-model.number="item.referenceAnswer" />
						</view>

					</view>
				</view>
			</view>
		</view>

复选框部分

在这里插入图片描述
这里是双重for循环,change事件传参分别是每道题的详情跟索引,一级选项的详情跟索引

js部分

changehandel(j, jindex, index, item) {
				// 声明一个变量默认为0
				let num = 0

				let maxnum = item.type == 0 ? 2 : item.maxChoiceNum
				// 声明一个变量接受当前题索引项
				let _questions = this.paperDetail.questions[index]
				// 当前选项的选中判断取反
				_questions.choices[jindex].checkflg = !_questions.choices[jindex].checkflg

				// 循环每道题的若干选项,checkflg为true则选中让num++
				for (var i = 0; i < _questions.choices.length; i++) {
					if (_questions.choices[i].checkflg) {
						num++
					}
				}
				// 判断,num大于1时当前题的所有选项disabled禁用值为true,反之所有选项的disabled禁用值为false
				if (num > 0 && num < maxnum) {
					console.log("大于等于1", num, maxnum);
					if (_questions.choices[jindex].checkflg) {
						_questions.choices[jindex].isRight = 1
					} else {
						_questions.choices[jindex].isRight = 0
					}

					for (var k = 0; k < _questions.choices.length; k++) {
						this.$set(this.paperDetail.questions[index].choices[k], "disabled", false)
					}
					// 赋值给原数据并且重新渲染
					this.paperDetail.questions[index] = _questions
					this.$forceUpdate()
					return
				} else if (num == maxnum) {
					_questions.choices[jindex].isRight = 1
					_questions.choices[jindex].checkflg = true
					for (var k = 0; k < _questions.choices.length; k++) {
						this.$set(this.paperDetail.questions[index].choices[k], "disabled", true)
					}
					// 赋值给原数据并且重新渲染
					this.paperDetail.questions[index] = _questions
					this.$forceUpdate()
					return
				} else if (num == 0) {
					console.log("等于0", num, maxnum);
					_questions.isRight = 0
					this.paperDetail.questions[index] = _questions
					this.$forceUpdate()
					return
				} else {
					console.log("大于等于2", num, maxnum);
					_questions.choices[jindex].isRight = 0

					_questions.choices[jindex].checkflg = false

					for (var k = 0; k < _questions.choices.length; k++) {
						this.$set(this.paperDetail.questions[index].choices[k], "disabled", true)
					}
					// 赋值给原数据并且重新渲染
					this.paperDetail.questions[index] = _questions

					this.$forceUpdate()
					return
				}

				console.log(this.paperDetail.questions[index], "结果");
			},

采坑

uniapp的复选框,点击视图虽然显示选中了,但是数据却不会更新,而且用js更改当前点击项的选中状态,代码更新了,视图却不会更新,可以更改其他选项的就会生效,第一次用了uview的组件,里面有限制最大选中的api,但是不生效,有bug

标题

前几天和一个不怎么熟悉但是特别特别喜欢的男生表白了当然没有面对面,虽然有点怂,但是这是我二十一年来最勇敢的一次了他没有答应,也没有干脆的拒绝我和周围每个认识的人都聊起他却没有丝毫尴尬因为表白失败,反而更喜欢他了我觉得自己足够闪耀的时候,他一定能发现自己哈哈,等那一天回来补充答案啊~喜欢上一个对感情认真又负责的男孩子,不管他喜欢不喜欢我,都觉得是件幸福的事儿


版权声明:本文为qq_43513271原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。