In this post, i will tell you how to select only one checkbox from multiple checkboxes at a time by using jQuery by two ways.
This script is usefull when you need users to be able to select only one checkboxes in pages same as radio button i mean if you have group of checkboxes and you want to force user to select only one checkbox at a time then you can use this script.
I know in many cases radio buttons are "ideal" but in some cases you will need this script to check only one checkboxes from group of checkboxes.
See the example below :
- <html>
- <head>
- <title>how to select only one checkbox at a time in jquery</title>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
- </head>
- <body>
- <input value="1" name="product" class="product-list" type="checkbox">Product 1
- <input value="2" name="product" class="product-list" type="checkbox">Product 2
- <input value="3" name="product" class="product-list" type="checkbox">Product 3
- <input value="4" name="product" class="product-list" type="checkbox">Product 4
- <input value="5" name="product" class="product-list" type="checkbox">Product 5
- <script type="text/javascript">
- $('.product-list').on('change', function() {
- $('.product-list').not(this).prop('checked', false);
- });
- </script>
- </body>
- </html>
You can also go with following script to force user to select only checkbox at a time :
- <script type="text/javascript">
- //Near checkboxes
- $('.product-list').click(function() {
- $(this).siblings('input:checkbox').prop('checked', false);
- });
- </script>
