The element-ui checkbox is disabled according to different conditions.

1. Requirements are shown in figure

clipboard.png

when the frequency is not selected, all the options are disabled, and only one can always be selected before, during and after the meal. When you select one button once a day, all the other buttons are disabled. When you select breakfast twice a day, if you choose breakfast, you can"t choose it before and after breakfast. If you choose breakfast at this time, you can"t choose all the rest before going to bed. For the rest, the highest frequency can be four times a day.

when it comes to the code, I wrote it with four sets of multiple check boxes:

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

I"ve been thinking about the rest of the logic for a long time, but I don"t have a train of thought. The passing god gave me some advice. Thank you

.
Apr.01,2021

do not understand your requirements, can you describe it more clearly


you need to know the value you get by clicking the drop-down menu, and according to this to determine the status of the check box to monitor the value of your drop-down menu
and how many groups of multiple check boxes can you click every time you come in? No matter what you choose this time, you won't choose it the next time you come in, right?

Menu