Nsryjdtyk

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 come 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

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



computed: {

  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 computed 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: ,

    }

  },

  computed: {

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

      }

    }

  }

});