element-ui多选框根据不同条件禁用？

Question

1、需求如图：

不选中频次的时候，全部选项都是禁用的，而且饭‘前中后’永远都只能选中一个，选择一日一次的时候，选中任何一个按钮其余所有按钮全部禁用，选中一日两次的时候，如选了早餐中，那么早餐前后都不能选，这个时候再选中睡前的话剩下的就全部不可选。剩下的同理，最高的频次可以是一日4次。

具体到代码里我是用了4组多选框写的：

         <div class="breakfast">
                        <span>早餐</span>
                        <el-checkbox-group v-model="checkList.checkList1" class="breakfastSelect" size="small" @change="chackGroup">
                            <el-checkbox border label="1" :disabled='disabledValue.disabled1' @change="checkBox">前</el-checkbox>
                            <el-checkbox border label="2" :disabled='disabledValue.disabled2' @change="checkBox">中</el-checkbox>
                            <el-checkbox border label="3" :disabled='disabledValue.disabled3' @change="checkBox">后</el-checkbox>
                            <!--<el-checkbox v-for="(item,index) in disabledValuesss" border :label="item.value" :disabled='item.disabled' @change="checkBox(index)" :key="item.id">{{item.label}}</el-checkbox>-->
                        </el-checkbox-group>
                    </div>
                    <div class="breakfast">
                        <span>午餐</span>
                        <el-checkbox-group v-model="checkList.checkList2" class="breakfastSelect" size="small" @change="chackGroup">
                            <el-checkbox border label="4" :disabled='disabledValue.disabled4' @change="checkBox">前</el-checkbox>
                            <el-checkbox border label="5" :disabled='disabledValue.disabled5' @change="checkBox">中</el-checkbox>
                            <el-checkbox border label="6" :disabled='disabledValue.disabled6' @change="checkBox">后</el-checkbox>
                        </el-checkbox-group>
                    </div>
                    <div class="breakfast">
                        <span>晚餐</span>
                        <el-checkbox-group v-model="checkList.checkList3" class="breakfastSelect" size="small" @change="chackGroup">
                            <el-checkbox border label="7" :disabled='disabledValue.disabled7' @change="checkBox">前</el-checkbox>
                            <el-checkbox border label="8" :disabled='disabledValue.disabled8' @change="checkBox">中</el-checkbox>
                            <el-checkbox border label="9" :disabled='disabledValue.disabled9' @change="checkBox">后</el-checkbox>
                        </el-checkbox-group>
                    </div>
                    <div class="breakfast">
                        <span style="opacity: 0">占位</span>
                        <el-checkbox-group v-model="checkList.checkList4" class="breakfastSelect" size="small">
                            <el-checkbox border label="10" :disabled='disabledValue.disabled10'>睡前</el-checkbox>
                        </el-checkbox-group>
                    </div>
                    
                 
                 
                 
             data(){
                 return{
                     checkList:{
                            checkList1:[],
                            checkList2:[],
                            checkList3:[],
                            checkList4:[]
                        },
                        disabledValue:{
                            disabled1:true,
                            disabled2:true,
                            disabled3:true,
                            disabled4:true,
                            disabled5:true,
                            disabled6:true,
                            disabled7:true,
                            disabled8:true,
                            disabled9:true,
                            disabled10:true,
                        },
                 }
             
             }                
             
             

剩下的逻辑我想了半天都没有思路，路过的大神指点一下多谢了

Answer 1

没明白你要的需求啊，能再描述清楚点吗

Answer 2

你要清楚你点下拉菜单获取到的值，根据这个来判断复选框的状态 监听你的下拉菜单的值
还有你几组多选框是每次进来都是可以点击的吗？不管你这次选了什么，下次进来还是没有选中的是吗