1. Requirements are shown in figure
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
.