VueJS allow only 1 checkbox select based on class name

Question

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

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
– 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
– 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
– Haseeb Rehman, Commented Nov 20, 2018 at 10:09

tony19 · Accepted Answer · 2022-07-15 23:22:13Z

2

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

edited Jul 15, 2022 at 23:22

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Nov 20, 2018 at 10:06

Xeelley

1,1582 gold badges9 silver badges18 bronze badges

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

Comments

Zoe Edwards · Accepted Answer · 2018-11-20 09:51:53Z

1

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.

answered Nov 20, 2018 at 9:51

Zoe Edwards

13.8k3 gold badges28 silver badges45 bronze badges

2 Comments

Haseeb Rehman Over a year ago

wouldn't it disable the checkbox completely after selecting one and won't be able to select or deselect again?

Zoe Edwards Over a year ago

Yes, that code isn’t complete, it’s a starter. I’m not completely sure of the functionality you’re trying to achieve so I can’t write the code for you. You could possibly have two data properties, and that if the first has more than 1 (as above), then the second set of checkboxes are disabled. Again, not sure what you’re trying to do.

RomkaLTU · Accepted Answer · 2018-11-20 12:12:36Z

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

user12185134 · Accepted Answer · 2019-10-08 23:57:52Z

1

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>

answered Oct 8, 2019 at 23:57

user12185134

111 bronze badge

Collectives™ on Stack Overflow

VueJS allow only 1 checkbox select based on class name

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related