JSFiddle - React, Tailwind, and code Playground

by Rakesh Sadhula

HTML

<table border="1">
  <caption>
    <h5>Selection</h5>
  </caption>
  <tr id="9">
    <td>9.00</td>
    <td>
      <input type="checkbox" class="chkbox" title="9" value="9" />orders</td>
    <td>
      <input type="checkbox" class="chkbox" title="113" value="113" />placements</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>
      <input type="checkbox" class="chkbox" title="128" value="128" />merchandise</td>
    </td>
  </tr>
  <tr id="10">
    <td>10.00</td>
    <td>
      <input type="checkbox" class="chkbox" title="9" value="9" />transport</td>
    <td>
      <input type="checkbox" class="chkbox" title="113" value="113" />shipping</td>
    <td>
      <input type="checkbox" class="chkbox" title="128" value="128" />merchandise</td>
    </td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr id="11">
    <td>11.00</td>
    <td>
      <input type="checkbox" class="chkbox" title="128" value="128" />merchandise</td>
    <td>
      <input type="checkbox" class="chkbox" title="113" value="113" />shipping</td>
    </td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>

JavaScript

$(".chkbox").click(function(){
    var currentObj = $(this);
    $(this)
        .closest("tr")
        .find(".chkbox").attr("disabled","disabled");
    $(currentObj).removeAttr("disabled");
});