I have group of checkboxes:

<div class="additions">
  <input type="checkbox" value="10" v-model="additional">
  <input type="checkbox" value="30" v-model="additional">
  <div class="group">
    <input type="checkbox" value="50" v-model="additional">
    <input type="checkbox" value="70" v-model="additional">
  </div>
</div>

I collecting checked values to data:

new Vue({
  el: '#app',
  data() {
    return {
      additional: [],
    }
  },
});

Can't figure out how to prevent checking more then 1 checkbox inside .group I tried using radio, but then stranger things e up, decided to stick with checkboxes. I could do it in jQuery or even vanilla JS I think, but I don't know where to put check (on change event method?). What is the best way to do it in VueJS?

Here is my pen:

I have group of checkboxes:

<div class="additions">
  <input type="checkbox" value="10" v-model="additional">
  <input type="checkbox" value="30" v-model="additional">
  <div class="group">
    <input type="checkbox" value="50" v-model="additional">
    <input type="checkbox" value="70" v-model="additional">
  </div>
</div>

I collecting checked values to data:

new Vue({
  el: '#app',
  data() {
    return {
      additional: [],
    }
  },
});

Can't figure out how to prevent checking more then 1 checkbox inside .group I tried using radio, but then stranger things e up, decided to stick with checkboxes. I could do it in jQuery or even vanilla JS I think, but I don't know where to put check (on change event method?). What is the best way to do it in VueJS?

Here is my pen: https://codepen.io/RomkaLTU/pen/LXOJgr?editors=1010

• javascript
• vue.js
• checkbox

• according to your codepen, I saw the lables Radio #1 and Radio #2, are they meant to be type="radio" rather than type="checkbox"? – Tu Nguyen Commented Nov 20, 2018 at 9:46
• Sorry not radio, it was at the beginning but then I decided to stick with checkboxes. That was question about. – RomkaLTU Commented Nov 20, 2018 at 9:49
• check if this is what you are trying to achieve. codepen.io/Haeeb098/pen/eQebgz?editors=1011 – Haseeb Rehman Commented Nov 20, 2018 at 10:09

4 Answers 4

You can use different ways:

1. :disabled directive

<input type="checkbox" value="20" v-model="additional" :disabled="condition">

Using condition like additional.length > 0 you can disable checkbox if more then one already selected.

2. Watchers

data() {
  ...
},
watch: {
  additional(newValue, oldValue) {
    // new additional array value will be here every time any checkbox switched
  }
}

Don’t think about the DOM, don’t think about classes. Hard habit to break, I know.

<input type="checkbox" value="50" v-model="additional" :disabled="hasAdditional">

puted: {
  hasAdditional() {
    return this.additional.length > 0
  }
}

Use that as a starter for what you’re trying to do. Possibly you have to use a watcher to detect when it changes and uncheck ones that aren’t allowed. You could also change hasAdditional to return the sum of the number of additions, then use that to work if if you can select the group.

Don’t rely on CSS classes. Use methods, watchers, and puted properties to work the logic out.

Thanks for pointing me out, but I choosed solution without disabling input as it get's very confusing for the end user. What I did:

<input type="checkbox" value="30" v-model="additional">
<input type="checkbox" value="40" v-model="additional">
<input type="checkbox" value="10" v-model="additional_grouped" @change="uniqueCheck">
<input type="checkbox" value="20" v-model="additional_grouped" @change="uniqueCheck">


new Vue({
  el: '#app',
  data() {
    return {
      additional: [],
      additional_grouped: [],
    }
  },
  puted: {
    final: function(){
      return this.additional.concat(this.additional_grouped);
    }
  },
  methods: {
    uniqueCheck(e){
      this.additional_grouped = [];
      if (e.target.checked) {
          this.additional_grouped.push(e.target.value);
      }
    }
  }
});

Just create a function to clear the list of check boxes each time you select an option:

<div class="additions">
<input type="checkbox" value="10" v-model="additional" v-on:click= "check_one()">
<input type="checkbox" value="30" v-model="additional" v-on:click= "check_one()">
</div>
<script>
data(){
return {
additional: [], 
}
},
methods: {
check_one: function(){
this.additional = [];
}       
}
}
</script>