Highlight only the first row of a table where checkbox is checked

Question

I previously worked on a page using jquery where I needed to select checkboxes in a table based on some data attributes, I.e any row where a checkbox is selected will lead to all the other checkboxes being disabled if their data attributes do not match the given criteria.

There is now another requirement to the above case where I'd like to only highlight the first row of the first checkbox that is checked at any given time.

Here 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);
        }
      }
    });
  })
});

And the sample working code Here: Sample code here

The highlight is working (Well almost) but not quite so . I'd like to be able to only highlight one row at a time , where a checkbox is checked

Don't use `attr` for Boolean attributes like "disabled"; use `prop` instead. See [.prop() vs .attr()](https://stackoverflow.com/q/5874652/215552). — Heretic Monkey, Apr 28 '21 at 18:53

Crezzur · Accepted Answer · 2021-04-28T19:02:35.383

You are using a wrong closest() selector. .row is for searching a class name. You have to search for a element. Adding color to the <tr> element will color the selected row.

More information about the closest() function can be found here.

Example

$(".my-check").each(function(e, elem) {
  $(elem).on("change", function() {
    var sel = $(this);
    var num = sel.data("number");
    var co = sel.data("code");
    if (sel.eq(0).is(":checked")) {
      if (!$(".highlight")[0]) { // IF CLASS IS NOT FOUND --> Add class
        sel.closest("tr").addClass("highlight");
      }
      $(".my-check:not([data-number=" + num + "])").prop("disabled", true);
      $(".my-check:not([data-code=" + co + "])").prop("disabled", true);
    } else {
      if (!$(".my-check[data-number=" + num + "]:checked").length) {
        $('table tr').removeClass("highlight");
        $(".my-check").not(sel).prop("disabled", false);
      }
    }
  });
});

.highlight {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
    <th>Status</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
    <td><input type="checkbox" class="my-check" data-number="7867" data-code="CB45" /></td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
    <td><input type="checkbox" class="my-check" data-number="3307" data-code="HUNT1" /></td>
  </tr>
  <tr>
    <td>Harry</td>
    <td>Green</td>
    <td>50</td>
    <td><input type="checkbox" class="my-check" data-number="7867" data-code="CB45" /></td>
  </tr>
  <tr>
    <td>Mark</td>
    <td>Twain</td>
    <td>94</td>
    <td><input type="checkbox" class="my-check" data-number="5645" data-code="KLY" /></td>
  </tr>
</table>

Maybe I need to explain better as to what I'm looking to accomplish . If the first row is highlighted , then on subsequent checkbox checked , I only ever want the first highlighted row to stay highlighted until I uncheck all and start the process again — lacoder, Apr 28 '21 at 18:53

score 0 · Answer 2 · answered Apr 28 '21 at 20:16

function handleMyCheckChange(evt) {
  const methodName = this.checked && 'addClass' || 'removeClass';
  $(this).closest('tr')[methodName]('selected-row');
}
function initMyCheckChangeHandling(idx, elm) {
  $(elm).on('change', handleMyCheckChange);
}
$(".my-check").each(initMyCheckChangeHandling);

.selected-row {
  background-color: red;
}
.selected-row ~ .selected-row {
    background-color: initial;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
    <th>Status</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
    <td><input type="checkbox" class="my-check" data-number="7867" data-code="CB45" /></td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
    <td><input type="checkbox" class="my-check" data-number="3307" data-code="HUNT1" /></td>
  </tr>
  <tr>
    <td>Harry</td>
    <td>Green</td>
    <td>50</td>
    <td><input type="checkbox" class="my-check" data-number="7867" data-code="CB45" /></td>
  </tr>
  <tr>
    <td>Mark</td>
    <td>Twain</td>
    <td>94</td>
    <td><input type="checkbox" class="my-check" data-number="5645" data-code="KLY" /></td>
  </tr>
</table>

Highlight only the first row of a table where checkbox is checked

2 Answers2