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

Question

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>

have you tried :disabled=isChecked instead of :class="{disabled: isChecked}" ? — Seblor
– Seblor, Commented Oct 2, 2018 at 21:20
Do you mind if I create an answer so people who find this question can get the answer more easily ? — Seblor
– Seblor, Commented Oct 2, 2018 at 21:26
Definitely. I was about to ask you to post an answer, maybe with a bit elaboration. — russell
– russell, Commented Oct 2, 2018 at 21:30

Seblor · Accepted Answer · 2018-10-02 22:43:02Z

1

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>

edited Oct 2, 2018 at 22:43

answered Oct 2, 2018 at 21:30

Seblor

7,1771 gold badge30 silver badges48 bronze badges

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

2 Comments

HM107 Over a year ago

There are missing quotations in :disabled="isChecked"

Seblor Over a year ago

According to the doc it's not required, but is said to be avoided as it makes developpers get the habit of not adding spaces in the attributes values (vuejs.org/v2/style-guide/…). Thanks for pointing it out, I never really thought about that, I will add them.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related