JSFiddle - React, Tailwind, and code Playground

by Brad Patton

HTML

<table class="table" cellpadding="0" cellspacing="0" border="0">
	<thead class="header-row-first">
		<tr>
			<th class="first-cell" width="215"><span class="access-helper">Mark which cities you have held a meeting or plan to. You must check at least one box per column.</span></th>
			<th class="second-cell" width="190" id="col-11801">Have held a meeting in the past two years</th>
			<th class="last-cell" width="190" id="col-11802">Plan to hold a meeting in the next two years</th>
		</tr>
	</thead>
	<tbody>
		<tr class="odd-row first-row row-10001 ">
			<th class="first-cell" id="row-10001" scope="row">Hawaii</th>
			<td class="second-cell"><input type="checkbox" class="input-checkbox" name="3373244-70-10001-11801" id="3373244-70-10001-11801" value="11801"></td>
			<td class="last-cell"><input type="checkbox" class="input-checkbox" name="3373244-70-10001-11802" id="3373244-70-10001-11802" value="11802" ></td>
		</tr>
		<tr class="even-row last-row row-10002 ">
			<th class="first-cell" id="row-10002" scope="row">Sacramento, CA</th>
			<td class="second-cell"><input type="checkbox" class="input-checkbox" name="3373244-70-10002-11801" id="3373244-70-10002-11801" value="11801" ></td>
			<td class="last-cell"><input type="checkbox" class="input-checkbox" name="3373244-70-10002-11802" id="3373244-70-10002-11802" value="11802" ></td>
		</tr>
		<tr class="odd-row row-10003 ">
			<th class="first-cell" id="row-10003" scope="row">Salt Lake City, UT</th>
			<td class="second-cell"><input type="checkbox" class="input-checkbox" name="3373244-70-10003-11801" id="3373244-70-10003-11801" value="11801" ></td>
			<td class="last-cell"><input type="checkbox" class="input-checkbox" name="3373244-70-10003-11802" id="3373244-70-10003-11802" value="11802" ></td>
		</tr>
		<tr class="even-row row-10004 ">
			<th class="first-cell" id="row-10004" scope="row">San Diego, CA</th>
			<td class="second-cell"><input type="checkbox" class="input-checkbox" name="3373244-70-10004-11801"...

CSS

td   {text-align:center;}

JavaScript

$(function() {
	// Get the row with None or None of the above.
	var row = $('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 add events to the rest of them in the column
			var index = $(this).parent().index() + 1;
			var selector = "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;
				});
			}
		});
	});
});