disable checkbox after checking two vuejs

Question

how can I disable an array of checkbox after checking a number of checkboxes from that array ? Is there a way to do this in vuejs or I will need a watcher for that? In fact I tried to watch the 'ord.sauce' but I couldnt make it work

this is the component

Vue.component('sauce-view', {
props: ["sauce", "ord", "name"],
template: '
    <div class="">
            <input type="checkbox" :name="name" :value="sauce.id" v-model="ord.sauce">  
            {{sauce.name}}
        <label >
            <img :src="sauce.link" >
        </label>
    </div>',
  });

This is the HTML

<table>
<tr v-for="o in order" >
       {{o.sauce}}      
     <td v-for="sauce in les_sauces" >
        <sauce-view :sauce="sauce" :ord="o" :name="o.produit+o.num">
        </sauce-view>
    </td>
</tr></table>

UDany · Accepted Answer · 2016-12-19 04:34:17Z

12

I have created a simple fiddle that should illustrate the logic behind it: https://jsfiddle.net/UDany/r9q4x85d/

This would be the markup:

<div id="demo">
  <template v-for="(item, index) in itemlist">
    <label><input type="checkbox" :value="index" name="condiment" v-model="selectedItems" :disabled="selectedItems.length >= max && selectedItems.indexOf(index) == -1" /> {{item}}</label>
  </template>
  <div>{{selectedItems.join(', ')}}</div>
</div>

And your JS would look like this:

var demo = new Vue({
    el: '#demo',
    data: {
        selectedItems: [],
        itemlist: [
                "Mayo",
                "Ketchup",
                "Mustard",
                "Honey"
        ],
        max: 2
    }
})

Since you're not using the input directly into the main code you'll need to proxy the properties through/from it (possibly wiring events for "select" and "unselect" and having a property for "disabled")

answered Dec 19, 2016 at 4:34

UDany

1445 bronze badges

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

2 Comments

Siempay Over a year ago

why do we need this "selectedItems.indexOf(index) == -1" in the condition?

UDany Over a year ago

@brahimm this makes sure it doesn't disable the currently checked checkboxes. In an array indexOf returns the index of the value it receives OR -1 if it wasn't able to find it, thus "selectedItems.indexOf(index) == -1" will only return true if the value can't be found within the selectedItems array.

Community · Accepted Answer · 2017-05-23 12:30:52Z

0

I've answered a question very similar to this here:

Vue.js limit selected checkboxes to 5

In your situation it's a little more involved since you're handling the value in a component. It's hard to tell your exact needs so I'd clear up your question a little more.

edited May 23, 2017 at 12:30

CommunityBot

11 silver badge

answered Dec 18, 2016 at 23:41

Bill Criswell

33k8 gold badges80 silver badges68 bronze badges

2 Comments

Siempay Over a year ago

the idea is clever, I didnt think of it first time, but it disables all the inputs, and I need the checked-boxes to stay able to be unchecked to that I can control that the user check only two (for example)

Bill Criswell Over a year ago

The code in that answer doesn't disable checked inputs so you'll always be able to unselect them.

Collectives™ on Stack Overflow

disable checkbox after checking two vuejs

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related