How to initialize radiogroup when v-radio is active and disabled

Question

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>

Jens van Hellemondt · Accepted Answer · 2021-03-21T20:17:32.120

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>

hey thank u for ur answer, i mean for example when radio3 got disabled but still selected--> go to radio1 — Marwen_mxm, Mar 21 '21 at 08:39
Updated. I think this might work if I understand you correctly. Basically, instead of doing the assignment in the @change, I have set a method. The method handles the original @change and also the jump to `radio1` on disabled radio 3/4 — Jens van Hellemondt, Mar 21 '21 at 20:22

score 0 · Answer 2 · edited Jul 16 '22 at 05:51

0

I respectfully disagree with Jens's v-model statement. According vuejs docs v-model is a directive to create two-way data bindings on form input.

This post perfectly explains why you should use v-model.

tldr : v-model is essentially the same as:

    <input
       v-bind:value="something"
       v-on:input="something = $event.target.value">

So to answer your question, what I propose is to simply disable one v-checkbox if one is already selected.

    <v-checkbox label="Check 2" v-model="check2" :disabled="check1"></v-checkbox>
    <v-checkbox label="Check 1" v-model="check1" :disabled="check2"></v-checkbox>

edited Jul 16 '22 at 05:51

tony19

125,647
18
229
307

answered Mar 20 '21 at 23:50

Thomas Uchiha

309
2
8

this don't work because it disabled the check1 if check2 is checked, and i don't want it to be disabled, just set to false...with @change works perfectly – Marwen_mxm Mar 21 '21 at 08:55

How to initialize radiogroup when v-radio is active and disabled

2 Answers2