Previously, I tackled a challenge on a webpage using jQuery where checkboxes in a table needed to be selected based on specific data attributes. Essentially, if one checkbox in a row was selected, the rest of the checkboxes would be disabled if their data attributes did not match the criteria.
Now, there's an additional requirement where I only want to highlight the first row that contains a checked checkbox at any given time.
Below is the jQuery snippet:
$(function() {
$(".my-check").each(function(e, elem) {
$(elem).on("change", function() {
var num = $(this).data("number");
var co = $(this).data("code");
if ($(this).eq(0).is(':checked')) {
$(this).closest('.row').addClass('highlight');
$('.my-check:not([data-number=' + num + '])').attr('disabled', true);
$('.my-check:not([data-code=' + co + '])').attr('disabled', true);
} else {
if (!$('.my-check[data-number=' + num + ']:checked').length) {
$(this).closest('.row').removeClass('highlight');
$(".my-check").not($(this)).attr('disabled', false);
}
}
});
})
});
See the working sample code here: Sample code here
The highlighting functionality is almost there, but it needs some tweaking. I'd like to ensure that only one row is highlighted at a time when a checkbox is checked.