Titan Fusion

Alexandar Tzanov's Personal Blog

Function: checkboxLimiter


The checkboxLimiter function will disable all checkboxes, which share common value for the name attribute, after the user has checked a pre-set number of them.

The the limit number is set in the function source to avoid inconsistency if adding the onChange function call inline of the page source. This does not matter if you are using event listeners, which you should be!

Source Code

  1. /* Checkbox Limiter
  2.  * Author: Alexandar Tzanov
  3.  * Revised: 2015-08-20
  4.  * Version: 01.00.00
  5.  * Description: The function fill limit enabled checkbox fields based on a
  6.  *              common "name" attribute, and a preset "allowed" checkbox count.
  7.  * Input: object keyword 'this', numAllowedChecked (set in function)
  8.  * About: http://titanfusion.net/source-code-dna/javascript/function-checkboxlimiter/
  9.  */
  10.  
  11. // Pass the checkbox name to the function
  12. function checkboxLimiter(checkboxField) {
  13.     var checkboxField = checkboxField || null;
  14.  
  15.     if (checkboxField)
  16.     {
  17.         var checkboxNameValue = checkboxField.name;
  18.         var numAllowedChecked = 2;  // Number of allowd checked checkbox.
  19.         var checkboxesChecked = [];
  20.         var checkboxes = document.getElementsByName(checkboxNameValue); // Get list of matching checkboxe elements.
  21.  
  22.         // Check for checked checkboxes.
  23.         for (var i = 0; i < checkboxes.length; i++) {
  24.             if (checkboxes[i].checked) {
  25.                 // Add to list of checked checkboxes.
  26.                 checkboxesChecked.push(checkboxes[i]);
  27.             }
  28.         }
  29.  
  30.         // Test and control enabled checkboxes.
  31.         if (checkboxesChecked.length == numAllowedChecked)
  32.         {
  33.             // Disable all un-checked checkboxes.
  34.             for (var i = 0; i < checkboxes.length; i++)
  35.             {
  36.                 if (!checkboxes[i].checked)
  37.                 {
  38.                     checkboxes[i].disabled = true;
  39.                 }
  40.             }
  41.         } else {
  42.             // Enable all disabled checkboxes.
  43.             for (var i = 0; i < checkboxes.length; i++)
  44.             {
  45.                 if (checkboxes[i].disabled)
  46.                 {
  47.                     checkboxes[i].disabled = false;
  48.                 }
  49.             }
  50.         }
  51.     }
  52. }

Usage

checkboxLimiter(this);

Parameters

Name Definition Default Value
this The calling node object. Must have a “name” property. required

Return

There is no return.

Examples

Inline of page source.

<label for="checkBox1">1. Checkbox<input type="checkbox" value="checkBox1" id="checkBox1" name="checkboxSet[]" onclick="checkboxLimiter(this)"></label>

Adding it via an event listener.

document.getElementById("checkBox1").addEventListener("click", function(){checkboxLimiter(this);}, false);

Revision History

Date Version Changes
2015-08-20 01.00.00 Initial release.