CODEWITHSUNDEEP
vue.js
Siempay
Siempay

Reputation: 1002

disable checkbox after checking two vuejs

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>

Upvotes: 4

Views: 30782

Answers (2)

UDany
UDany

Reputation: 144

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")

Upvotes: 12

Bill Criswell
Bill Criswell

Reputation: 32921

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.

Upvotes: 0

Related Questions