CODEWITHSUNDEEP
vue.jsvuejs2radio-button
katie hudson
katie hudson

Reputation: 2893

Enable Disable radio buttons based on models value

I am using Vue bootstrap, and I currently have several radio buttons. 

<b-form-radio-group
    id="radio1"
    v-model="$v.form.radio1.$model"
    name="radio1"
  >
    <b-form-radio value="yes">
      Yes
    </b-form-radio>
    <b-form-radio value="no">
      No
    </b-form-radio>
</b-form-radio-group>

<b-form-radio-group
    :disabled="$v.form.radio1.$model !== 'yes'"
    id="radio2"
    v-model="$v.form.radio2.$model"
    name="radio2"
  >
    <b-form-radio value="yes">
      Yes
    </b-form-radio>
    <b-form-radio value="no">
      No
    </b-form-radio>
</b-form-radio-group>

<b-form-radio-group
    :disabled="$v.form.radio2.$model !== 'yes'"
    id="radio3"
    v-model="$v.form.radio3.$model"
    name="radio3"
    >
    <b-form-radio value="yes">
      Yes
    </b-form-radio>
    <b-form-radio value="no">
      No
    </b-form-radio>
</b-form-radio-group>

I want these radios to be answered in order, so I disable them until the previous radio button has an answer of yes. To do this, I just check the vmodel value for the previous radio

:disabled="$v.form.radio1.$model !== 'yes'"

This seems to work, but I have a problem. If I answer yes to all 3 radio buttons, and then revisit radio1 and change this to no, radio2 is disabled again as it should be. However, with this setup, radio3 is still enabled. I basically need it so that if a radio is set to no, all following radio buttons should be disabled. If it is set to yes, the next following radio should be enabled.

How can I achieve something like this?

Thanks

Upvotes: 0

Views: 6250

Answers (1)

Hiws
Hiws

Reputation: 10334

Here's a snippet utilizing the input event. If the value gets changed to no it will change the next radio button you've defined to no as well, which will fire another input event and bubble through the order.

window.onload = () => {
  new Vue({
    el: '#app',
    data() {
      return {
        form: {
          radio1: 'no',
          radio2: 'no',
          radio3: 'no'
        }
      }
    },
    methods: {
      onChanged(nextRadio, newValue) {
        if(newValue === 'no'){
          this.form[nextRadio] = 'no'
        }
      }
    }
  })
}
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>

<link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" rel="stylesheet"/>

<div id="app">
  <b-form-radio-group
      id="radio1"
      v-model="form.radio1"
      name="radio1"
      @input="onChanged('radio2', $event)"
    >
      <b-form-radio value="yes">
        Yes
      </b-form-radio>
      <b-form-radio value="no">
        No
      </b-form-radio>
  </b-form-radio-group>

  <b-form-radio-group
      :disabled="form.radio1 !== 'yes'"
      id="radio2"
      v-model="form.radio2"
      name="radio2"
      @input="onChanged('radio3', $event)"
    >
      <b-form-radio value="yes">
        Yes
      </b-form-radio>
      <b-form-radio value="no">
        No
      </b-form-radio>
  </b-form-radio-group>

  <b-form-radio-group
      :disabled="form.radio2 !== 'yes'"
      id="radio3"
      v-model="form.radio3"
      name="radio3"
      >
      <b-form-radio value="yes">
        Yes
      </b-form-radio>
      <b-form-radio value="no">
        No
      </b-form-radio>
  </b-form-radio-group>
</div>

Upvotes: 1

Related Questions