VueJS restricts the selection of only one checkbox based on its class name

Question

VueJS restricts the selection of only one checkbox based on its class name

I am working with a group of checkboxes:

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

I am storing the checked values in a data variable:

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

I am struggling to find a way to limit checking more than one checkbox inside the .group element. I initially considered using radio buttons, but encountered some issues, so I decided to continue with checkboxes. I believe I could achieve this using jQuery or vanilla JS, however, I am unsure about where to implement the check (on change event method?). What would be the best approach to accomplish this in VueJS?

You can view my code on CodePen here: https://codepen.io/RomkaLTU/pen/LXOJgr?editors=1010

javascript vue.js checkbox

Answer 1

Answer №1

There are various ways to achieve this:

1. :disabled directive

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

You can disable the checkbox by setting a condition such as additional.length > 0 to prevent multiple selections.

2. Watchers

data() {
  ...
},
watch: {
  additional(newValue, oldValue) {
    // Triggered whenever a checkbox is switched
  }
}

Answer 2

There are various ways to achieve this:

1. :disabled directive

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

You can disable the checkbox by setting a condition such as additional.length > 0 to prevent multiple selections.

2. Watchers

data() {
  ...
},
watch: {
  additional(newValue, oldValue) {
    // Triggered whenever a checkbox is switched
  }
}

Answer 3

Answer №2

It's important to shift your mindset away from focusing on the DOM and classes, even though it can be a difficult habit to break.

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

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

Start by using this code snippet as a foundation for what you are trying to accomplish. You may need to implement a watcher to detect changes and uncheck items that are not allowed. Alternatively, consider modifying hasAdditional to calculate the total number of additions, which can then determine if the group can be selected.

Avoid relying solely on CSS classes. Instead, utilize methods, watchers, and computed properties to handle the logical operations effectively.

Answer 4

It's important to shift your mindset away from focusing on the DOM and classes, even though it can be a difficult habit to break.

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

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

Start by using this code snippet as a foundation for what you are trying to accomplish. You may need to implement a watcher to detect changes and uncheck items that are not allowed. Alternatively, consider modifying hasAdditional to calculate the total number of additions, which can then determine if the group can be selected.

Avoid relying solely on CSS classes. Instead, utilize methods, watchers, and computed properties to handle the logical operations effectively.

Answer 5

Answer №3

Thank you for bringing this to my attention, however I opted for a solution that does not involve disabling input as it can be very confusing for the end user. Here is what I implemented:

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

Answer 6

Thank you for bringing this to my attention, however I opted for a solution that does not involve disabling input as it can be very confusing for the end user. Here is what I implemented:

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

Answer 7

Answer №4

To ensure the list of checkboxes is cleared each time an option is selected, simply implement a function for this purpose:

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

Answer 8

To ensure the list of checkboxes is cleared each time an option is selected, simply implement a function for this purpose:

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

VueJS restricts the selection of only one checkbox based on its class name

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Leveraging parameters within a sequence of object properties

Developing a Multi-Faceted Array Utilizing SQL Data

Locate the upper and lower limits within an array

Direct attention to the modal display

Setting the current date of a jQuery datepicker to the value of an input tag

Retrieve image details and display them in the console when the page is resized

Combining Data from Header to Body using HTML5 and JavaScript

Creating a seamless rotation effect on an SVG shape at its center across all browsers, even Internet Explorer

The Semantic UI dropdown consistently fails to return a value

What is the quickest way to increase value in the DOM?

The Axios post request is mistakenly sending my data as the key with an empty value instead of sending the entire data object itself

Receiving a XHR 404 error when trying to upload an mp3 file, even though the directory clearly

What is the best way to make tooltips track a specific data point they are connected to in D3?

Transform your HTML audio player into a Vue component

Attempting to find a solution to successfully transfer an object from the jEditable datatable plugin to my Java Servlet

Encountering invalid JSON response while making an API request

Forcing the rendering of a Vue.js component

Accessing files from various directories within my project

The data array generated from an axios request is not being rendered properly on the chart using Chart.js

Turning text into clickable links using JavaScript