element-ui多選框根據(jù)不同條件禁用？

1、需求如圖：

不選中頻次的時(shí)候，全部選項(xiàng)都是禁用的，而且飯‘前中后’永遠(yuǎn)都只能選中一個(gè)，選擇一日一次的時(shí)候，選中任何一個(gè)按鈕其余所有按鈕全部禁用，選中一日兩次的時(shí)候，如選了早餐中，那么早餐前后都不能選，這個(gè)時(shí)候再選中睡前的話剩下的就全部不可選。剩下的同理，最高的頻次可以是一日4次。

具體到代碼里我是用了4組多選框?qū)懙模?/p>

         <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,
                        },
                 }
             
             }                
             
             

剩下的邏輯我想了半天都沒有思路，路過的大神指點(diǎn)一下多謝了