Monday, March 13, 2017

Exclusive checkbox column

We had a customer that had a checkbox grid and wanted the checkboxes in one of the rows to be exclusive (e.g. when checked no other items in that column are checked). Most survey platforms have this functionality for a multiple choice checkbox question but not for columns in a checkbox grid. Some quick jQuery and JavaScript coding I had the following mostly generic function working.

$(function() {
  // Get the row with None or None of the above.
  var row = $('.sg-table tbody th:contains("None")').parent();
   
  // Find all of the checkboxes in that row and add a click event handler to them
  row.find(":input").each(function() {
    $(this).click(function() {
      // Get the index of the checkbox so you can change the other checkboxes in the same column.
      var index = $(this).parent().index() + 1;
      var selector = ".sg-table tbody tr td:nth-child("+index+") input:checkbox";
       
      // If the None of the above is being checked clear and disable the other checkboxes in the col.
      // Otherwise just re-enable them.
      if (this.checked) {
        $(selector).not(this).each(function() {
          this.checked = false;
          this.disabled = true;
        });
      } else {
        $(selector).not(this).each(function() {
          this.disabled = false;
        });
      }
    });
  });
});
Working demo: JSFiddle