$( 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 ; }); } }); }); }); |
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.
Working demo: JSFiddle
Subscribe to:
Posts (Atom)