[Vuejs]-Enable Disable radio buttons based on models value

by

1👍

✅

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/vue@2.6.10/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.0.4/dist/bootstrap-vue.js"></script>

<link href="https://unpkg.com/bootstrap@4.3.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue@2.0.4/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>
👤Hiws

Leave a comment