Limit Checkbox Selection with Vue – Only one can be selected

In this post we shall discuss how to restrict a checkbox so only one checkbox can be selected.

Quick Links to solutions

Only one checkbox can be selected solution using Jquery

Only one checkbox can be selected solution using vue

The Challenge: Only one checkbox can be selected

Recently while working on a project, I was faced with this challenge to limit the user from selecting multiple checkbox. Particularly in my case the user can pick only one checkbox at a time. Hey! before you scream “why couldn’t you just use a radio button where you have this feature out of the box?” and yes I could have, but I still wouldn’t achieve my set goals, WHY? with a radio button a user is cannot unchecked an option, you can only change your option. So I want the user to be able to check and completely uncheck an option.

Solution one

The first idea I came up with is to use Jquery which seems alot easier, all I have to do is uncheck all input except for the one the user click on. Easy right?

<div>
    <span>Group 2:</span>
    <input type="checkbox" class="group2" />
    <input type="checkbox" class="group2" checked />
    <input type="checkbox" class="group2" />
</div>
$('input[type="checkbox"]').on('change', function() {
   $(this).siblings('input[type="checkbox"]').not(this).prop('checked', false);
});

JS Explanation:

we are selecting all checkbox input from the DOM, then listening for when any one of this input changes, when this event happens, we select all siblings input in the DOM except for this very one and set its prop property to false; This will uncheck every other input except for the one the user clicks on.

checkout the Js Fiddle here http://jsfiddle.net/X597P/9/

The above code does the job pretty well, but in my case, I have to use vue, so I had to figure out how I am going to reproduce the above code using vue.

Solution Two

Now that I have decide to use vue, Do I have to dive into the DOM to select all input[checkbox] and then tag an event listener? Bad Idea. or do I add a watch method to watch for when this figure changes then run some code? that may work, but alot of code in that aspect so here is solution I came up with, an easy one

<div id='example-3'>
  <input @change="setOptions" type="checkbox" id="jack" value="Jack" @v-model="checkedNames">
  <label for="jack">Jack</label>
  <input @change="setOptions" type="checkbox" id="john" value="John" @v-model="checkedNames">
  <label for="john">John</label>
  <input @change="setOptions" type="checkbox" id="mike" value="Mike" @v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: @{{ checkedNames }}</span>
</div>

Vue Code

<script>
	export default {
		data () {
			return {
                checkedNames: [],
			}
		},

		methods: {
            setOptions (e) {
                this.checkedNames = [e.target.value];
            },
        }
	}
</script>

That’s it. We simply set checkedNames to the value of the input that was checked and vue will re-render the DOM

Read also on

Related Articles

Leave a Reply

Your email address will not be published.

Back to top button