CODEWITHSUNDEEP
javascriptvue.jsvuejs2
russell
russell

Reputation: 83

Toggle input element's disabled attribute depending on a checkbox value using VueJS

I'm trying to create a form in which one text input field will have disabled attribute if a checkbox is checked. I tried:

new Vue({
  el: "#app",
  data: {
    isChecked: false,
    name: null
  }
})
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
  <input type="text" v-model="name" :class="{disabled: isChecked}" placeholder="disabled if box checked">
  <input type="checkbox" v-model="isChecked">
</div>

Upvotes: 0

Views: 2251

Answers (1)

Seblor
Seblor

Reputation: 7136

Instead if using a conditional class, you can just use the property disabled and make it dynamic by adding a : in front of it and binding it to the isChecked variable. Your code will then look like this :

<div id="app">
  <input type="text" v-model="name" :disabled="isChecked" placeholder="disabled if box checked">
  <input type="checkbox" v-model="isChecked">
</div>

Upvotes: 1

Related Questions