選擇了排他選項之后 復選框其他選項不可以選擇
文章來源地址http://www.zghlxwxcb.cn/news/detail-821616.html

<view class="reportData" v-for="(val, index) in obj" :key="index">
<view v-if="val.type ==3" >
	<u-checkbox-group v-model="optionValue" placement="column"
		@change="(e) =>checkboxChange(e, val)">
						<view v-for="(item, i) in val.optionInfoList" :key="i">
							<u-checkbox :customStyle="{marginBottom: '20rpx'}" :label="item.optionName"
								:name="item.optionName">
							</u-checkbox>
						</view>
					
					</u-checkbox-group>
				</view>
</view>
<script>
	export default {
	data(){
		return {
		obj:"",
		optionValue:''
		}
	},
	onLoad(){
		this.init()
	},
	methods:{
		init(){
		//假設(shè)后臺返回的數(shù)據(jù)格式
			res={
			    "code":0,
			    "msg":null,
			    "data":{
			        "name":"排他選擇的問卷調(diào)查",
			        "questionInfoList":[
			            {
			                "id":"17",
			                "questionContent":"排他選項的題目？",
			                "type":"3",//3表示復選框
			                "optionInfoList":[ //選項
			                    {
			                        "id":"1",
			                        "optionName":"不包含選項",
			                        "optionType":"1"
			                    },
			                    {
			                        "id":"2",
			                        "optionName":"選項1",
			                        "optionType":"1"
			                    },
			                    {
			                        "id":"3",
			                        "optionName":"選項2",
			                        "optionType":"1"
			                    },
			                    {
			                        "id":"4",
			                        "optionName":"選項3",
			                        "optionType":"1"
			                    },
			                    {
			                        "id":"5",
			                        "optionName":"其他",
			                        "optionType":"1"
			                    }
			                ]
			            }
			        ]
			    }
			}}
			//對數(shù)據(jù)進行處理
			let data=res.data.questionInfoList
			this.obj=data.optionInfoList.map(item=>{
			//如果是復選框 type==3 讓所有的復選框默認為false 不選中
				if(item.type==3){
					item.optionInfoList.map(sub=>{
					  sub.checked=false;
					  return sub
					})
				}
				return item
			})
		},
		checkboxFn(e, item, index,i){
				//跟新obj中的checked狀態(tài)值
				this.$set(this.obj[index].optionInfoList[i],'checked',e)
				//如果選中 并且為排他選項
				if(item.optionType==1 && item.checked) {
					//對整個數(shù)據(jù)進行遍歷
					let optionInfoList=this.obj[index].optionInfoList.map((rr,k)=>{
						//讓排他項目選中 其他為false
						if(rr.optionType==1){
							rr.checked=true
						}else {
							rr.checked=false
						}
						return rr
					})
					//更新obj數(shù)據(jù)
					this.$set(this.obj[index],'optionInfoList',optionInfoList)
				}else {
					//如果選中 并且部位排他項 則 排他項為false 其他根據(jù)選擇的情況而定
					let optionInfoList=this.obj[index].optionInfoList.map((rr,k)=>{
						if(rr.optionType==1){
							console.log(11)
							rr.checked=false
							
						}
						return rr
					})
					this.$set(this.obj[index],'optionInfoList',optionInfoList)
				}
			},
			//
			checkboxChange(e, val, index) {
				
			}
	}

</script>

到了這里，關(guān)于uniapp復選框 實現(xiàn)排他選項的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！