I am creating a web form where the user input sometimes cannot be resolved to a unique value. In those cases, I present the user a set of checkboxes with the options (yes, a radio button makes more sense because you can only select one. But I hate that radio buttons change selection when you hit an arrow key.).
When a selection is made, I need to (1) deactivate the checkboxes for the other options when a checkbox in the group is selected and (2) add information to a data table that is used in subsequent activities.
When a selection is cleared, I need to (1) activate the checkboxes within the group and (2) remove the right row from the data table.
Below is the HTML code that achieves this. Now I just need to map this test page into the actual web code. There’s a post with the actual code I ended up using in production too.
<html>
<head><title>Adding And Removing From Table</title></head>
<body>
<div name="divCircuitClarifications" id="divCircuitClarifications">
<h3>My-Sample-Circuit-A</h3>
<input type="checkbox" value="123" tableselector="SampleCircuitA" name="SampleCircuitA[]" /><label>123</label>
<input type="checkbox" value="234" tableselector="SampleCircuitA" name="SampleCircuitA[]" /><label>234</label>
<input type="checkbox" value="345" tableselector="SampleCircuitA" name="SampleCircuitA[]" /><label>345</label>
<P>
<h3>My-Sample-Circuit-B</h3>
<input type="checkbox" value="abc" tableselector="SampleCircuitB" name="SampleCircuitB[]" /><label>abc</label>
<input type="checkbox" value="bcd" tableselector="SampleCircuitB" name="SampleCircuitB[]" /><label>bcd</label>
<input type="checkbox" value="cde" tableselector="SampleCircuitB" name="SampleCircuitB[]" /><label>cde</label>
<P>
<h3>My-Sample-Circuit-C</h3>
<input type="checkbox" value="Cabc" tableselector="SampleCircuitC" name="SampleCircuitC[]" /><label>abc</label>
<input type="checkbox" value="Cbcd" tableselector="SampleCircuitC" name="SampleCircuitC[]" /><label>bcd</label>
<input type="checkbox" value="Ccde" tableselector="SampleCircuitC" name="SampleCircuitC[]" /><label>cde</label>
<P>
</div>
<div id="divResultTable" name="divResultTable">
<table border="1" padding="1" name="tableSetsToCreate" id="tableSetsToCreate">
<thead><tr><th>ECCKT</th><th>Circuit ID</th></tr></thead>
<tbody></tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$("input:checkbox").on('click', function() {
var $objCheckbox = $(this);
if ($objCheckbox.is(":checked")) { // When checked, deactivate other checkboxes and add to sets to create table
var objCheckboxGroup = "input:checkbox[tableselector='" + $objCheckbox.attr("tableselector") + "']";
$(objCheckboxGroup).prop("disabled", true);
$objCheckbox.prop("disabled", false); // Allow checked box to be unchecked
var strTableRowString = '<tr><td>' + $objCheckbox.attr("tableselector") + '</td><td>' + $objCheckbox.val() + '</td>\n';
$('#tableSetsToCreate tbody').append(strTableRowString);
}
else { // When unchecked, active checkboxes and remove from sets to create table
var objCheckboxGroup = "input:checkbox[name='" + $objCheckbox.attr("name") + "']";
$(objCheckboxGroup).prop("disabled", false);
$("tr:contains('" + $objCheckbox.attr('tableselector') + "')").each(function(){ $(this).remove();})
}
});
</script>
</body>