HTML Checkbox Adding and Removing Table Row

Here’s the JavaScript code I ended up using to add and remove rows from a table based on a checkbox selection (and only allowing one checkbox per group to be selected). The biggest change is that I added a name and ID to my TR for easier identification.

$(document).on("change", "input[type='checkbox']", 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

        addSetToCreatingTable($objCheckbox.attr("setname"), $objCheckbox.attr("settype"), $objCheckbox.attr("goodcircuits") + "|" + $objCheckbox.attr("value"), $objCheckbox.attr("tableselector"));

    }
    else {							// When unchecked, active checkboxes and remove from sets to create table
        var objCheckboxGroup = "input:checkbox[name='" + $objCheckbox.attr("name") + "']";
        $(objCheckboxGroup).prop("disabled", false);	

        $("#" + $objCheckbox.attr('tableselector')).each(function(){ $(this).remove();})
}
});

Leave a Reply

Your email address will not be published. Required fields are marked *