make input (checkbox) disable when one of checkboxes is clicked in vue.js

Question

I've been working on this problem and I searched about this for an hour, but none of the answers led me to the correct answer.

I have three items(sorry I hard coded) which every single item contains one input(checkbox), and what I want to achieve is when one of the checkboxes is clicked, make others disable to click in vue.js.

<template>
    <input type="checkbox" @click="addContents(c)" :id="c.id" :disabled="selectedContent.length > 0">
    <input type="checkbox" @click="addContents(c)" :id="c.id" :disabled="selectedContent.length > 0">
    <input type="checkbox" @click="addContents(c)" :id="c.id" :disabled="selectedContent.length > 0">
</template>

<script>
    export default {
        data: function () {
            selectedContent: [],
        }, 
        methods: {
            addContent: function(data) {
                if (this.selectedContent.length === 0){
                  this.selectedContent.push(data);
                }
            }
        }
    }
</script>

I read I need :disabled to make input disable, so I thought after I push one item to selectedContent, it'd disable my inputs, but it doesn't. I can still clickable other inputs even after I checked one of them. Can anyone point me out what I'm doing wrong?

Evan · Accepted Answer · 2021-02-22 10:08:46Z

3

you missed spelled @click="addContent(c)"

new Vue({
  el: "#app",
  data: {
      selectedContent: [],
      c: {
        id: 1,
        content: 'something'
      }
  },
  methods: {
   addContent: function(data) {
      if (this.selectedContent.length === 0) {
        this.selectedContent.push(data);
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"><template>
    <input type="checkbox" @click="addContent(c)"  :disabled="selectedContent.length > 0">
    <input type="checkbox" @click="addContent(c)"  :disabled="selectedContent.length > 0">
    <input type="checkbox" @click="addContent(c)" :disabled="selectedContent.length > 0">
</template>
</div>

edited Feb 22, 2021 at 10:08

answered Feb 22, 2021 at 10:02

Evan

2,5277 gold badges40 silver badges72 bronze badges

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

Collectives™ on Stack Overflow

make input (checkbox) disable when one of checkboxes is clicked in vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related