I’m using vuetify and vue js 2.6
I have one v-radio-group which contain 5 v-radio and I have 2 v-checkbox, I use those checkboxes to enable/disable radio boxes:
1. Problem one: How to initialize v-radio-group when one of the radio boxes is disabled and active.
2. I want to toggle the Checkboxes, just one of the two should be checked and not both
I appreciate every help and respond to my request thanks… hier is the code:
<template>
<div>
<v-radio-group v-model="radiogroup">
<v-radio label="Radio 1" value="radio1"></v-radio>
<v-radio label= "Radio 2"value="radio2"></v-radio>
<v-radio
label="Radio 3"
value="radio3"
:disabled="check2 || check1"
></v-radio>
<v-radio
label="Radio 4"
value="radio4"
:disabled="check2"
></v-radio>
<v-radio
label="Radio 5"
value="radio5"
:disabled="disableradio"
></v-radio>
</v-radio-group>
<v-checkbox label="Check 2" v-model="check2"></v-checkbox>
<v-checkbox label="Check 1" v-model="check1"></v-checkbox>
</div>
</template>
<script>
export default {
data() {
return {
disableradio: true,
check1: false,
check2: false,
radiogroup: "radio1",
},
},
};
</script>
Updated because I didn't answer the question fully.
For the first problem, can you elaborate? What do you mean with initialize, when one is disabled and active?
For the second problem, you are describing a radio group (only one checkbox can be active). However, if you really want it to work with checkboxes, the following might help:
<v-checkbox label="Check 1" v-model="check1" @change="check2=false"></v-checkbox>
<v-checkbox label="Check 2" v-model="check2" @change="check1=false"></v-checkbox>
Additional update due to elaborated q1:
<template>
<div>
<v-radio-group v-model="radiogroup">
<v-radio label="Radio 1" value="radio1"></v-radio>
<v-radio label= "Radio 2"value="radio2"></v-radio>
<v-radio label="Radio 3" value="radio3" :disabled="check2 || check1"></v-radio>
<v-radio label="Radio 4" value="radio4" :disabled="check2" ></v-radio>
<v-radio label="Radio 5" value="radio5" :disabled="disableradio"></v-radio>
</v-radio-group>
<v-checkbox label="Check 2" v-model="check2" @change="checkboxHandler("check2")></v-checkbox>
<v-checkbox label="Check 1" v-model="check1" @change="checkboxHandler("check1")></v-checkbox>
</div>
</template>
<script>
export default {
data() {
return {
disableradio: true,
check1: false,
check2: false,
radiogroup: "radio1",
},
},
methods: {
checkboxHandler(type) {
if (type === "check1") this.check2 = false
if (type === "check2") this.check1 = false
if (this.radiogroup === "radio3" && (this.check1 || this.check2) ) this.radiogroup = "radio1"
if (this.radiogroup === "radio4" && this.check2 ) this.radiogroup = "radio1"
}
},
};
</script>