I need to limit number of selected checkboxes to 5. I tried using :disabled like here:
<ul>
<li v-for="item in providers">
<input type="checkbox"
value="{{item.id}}"
id="{{item.id}}"
v-model="selected_providers"
:disabled="limit_reached"
>
</li>
</ul>
And then:
new Vue({
el: '#app',
computed:{
limit_reached: function(){
if(this.selected_providers.length > 5){
return true;
}
return false;
}
}
})
This kind of works, but when it reaches 5, all of the check boxes are disabled and you can't uncheck the ones you don't want.
I also tried to splice the array with timeout of 1 ms, which works but feels hacky. Can anyone recommend anything please?
Basically, you'd only disable the input if it's not already selected and there's more than 4 of them selected.
The cleanest way I could come up with was:
new Vue({
el: '#app',
data: {
inputs: []
}
})
With:
<ul>
<li v-for="n in 10">
<label>
<input
type="checkbox"
v-model="inputs"
:value="n"
:disabled="inputs.length > 4 && inputs.indexOf(n) === -1"
number> Item {{ n }} {{ inputs.indexOf(n) }}
</label>
</li>
</ul>
Here's a quick demo: https://jsfiddle.net/crswll/axemcp8d/1/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With