How to disabled dropdown select conditionally in Vue JS

Question

I'm learning vue js, and am trying about conditional input group with vue js. I have 2 radio buttons, and 1 dropdown select. What I want is when Radio 1 is selected, the dropdown is enabled. and when Radio 2 is selected, the dropdown is disabled. I have made the code as below. Can anyone help me?

new Vue({
  el: '#app',
  data: {
    radioTypes: [
      {
         name:'Type 1', 
         value:60
      },
      {
         name:'Type 2', 
         value:70
       }
    ],
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" integrity="sha512-P5MgMn1jBN01asBgU0z60Qk4QxiXo86+wlFahKrsQf37c9cro517WzVSPPV1tDKzhku2iJ2FVgL67wG03SGnNA==" crossorigin="anonymous" />

<div id="app">
   <div v-for="data in radioTypes" v-bind:key="data.name">
      <input type="radio" v-model="radioVal" name="storage-type" :id="'storage'+data.name.toLowerCase()" :value="data.name">
      <label :for="'storage-'+data.name.toLowerCase()">{{data.name}}</label>
    </div>
  
  <div> 
      <select id="inputGroupSelect01" :disabled="radioTypes.name === 'Type 2'">
        <option selected>Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
  </div>
</div>

Mohib Arshi · Accepted Answer · 2021-03-28 08:41:45Z

3

You don't have to create a computed property, you can just check it like this.

new Vue({
  el: '#app',
  data: {
    radioVal: '',
  }
});

<div id="app">
  <input type="radio" v-model="radioVal" name="radioType" value="one">
  <label for="Radio1">Radio 1</label>
  <input type="radio" v-model="radioVal" name="radioType" value="two">
  <label for="Radio1">Radio 2</label>
  
  <div>
     <!-- Disable the select when radioVal value is two --> 
      <select id="inputGroupSelect01" :disabled="radioVal === 'two'">
        <option selected>Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
  </div>
</div>

answered Mar 28, 2021 at 8:41

Mohib Arshi

8305 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

frankfurt Over a year ago

I edited the snippet in the post above. what if i have a dynamic type radio? how is it disabled according to radio type when Type 2 is selected?

Mohib Arshi Over a year ago

You shouldn't check radioType :disabled="radioTypes.name === 'Type 2'" but radioVal to disable the radio button, since on radioVal the value is going to be modified. :disabled="radioVal === 'Type 2'".

frankfurt Over a year ago

oh yeah, i understand

Brother Woodrow · Accepted Answer · 2021-03-28 10:43:05Z

1

In addition to the other answer, it's probably worth noting that a computed should ideally be pure and not have what is called "side effects". That basically means a computed should not change other variables, but return something based on other variables (hence the name "computed"). So, like this:

radioEnable(){
  return this.radioVal === 'one';
}

But as stated, you don't even need the computed here.

answered Mar 28, 2021 at 10:43

Brother Woodrow

6,3923 gold badges22 silver badges23 bronze badges

Collectives™ on Stack Overflow

How to disabled dropdown select conditionally in Vue JS

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related