JSFiddle - React, Tailwind, and code Playground

by Eric L

HTML

<table id="test">

<tr>
<td><input type="hidden" class="shipmentId" value="4422" name="4422"> </td>
<td> <input type="checkbox" class="selected" > </td>
<td>Minot</td>
<td class='weight'>120</td>
</tr>
<tr>
<td><input type="hidden" class="shipmentId" value="4422" name="4422"> </td>
<td> <input type="checkbox" class="selected" > </td>
<td>Minot2</td>
<td class='weight'>80</td>
</tr>
<tr>
<td><input type="hidden" class="shipmentId" value="4422" name="4422"> </td>
<td> <input type="checkbox" class="selected" > </td>
<td>Minot3</td>
<td class='weight'>90</td>
</tr>
<tr>
<td><input type="hidden" class="shipmentId" value="111"> </td>
<td> <input type="checkbox" class="selected" > </td>
<td>unrelated</td>
<td class='weight'>120</td>
</tr>
<tr>
<td><input type="hidden" class="shipmentId" value="222"> </td>
<td> <input type="checkbox" class="selected" > </td>
<td>unrelated2</td>
<td class='weight'>80</td>
</tr>
</table>

JavaScript

$(".selected").on("click", function(){   
  var currentRowShipmentId = $(this).parents('tr').find('.shipmentId').val()
      currRow = $(this).parents('tr')
      hasOne = false;
  if($(this).prop('checked') ) {
      $('input[value='+currentRowShipmentId+']').each(function() {    
        var loopRow = $(this).parents('tr');
        if (!loopRow.is(currRow) && $(this).parents('tr').find('.selected').prop("checked")) {
          hasOne = true;          
        }        
      })
      if (hasOne) {
        $(this).prop('checked',false)
     }
  }                
});