JSFiddle - React, Tailwind, and code Playground

by Vasil Svetoslavov

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<table class="test">
<thead>
  <tr>
    <td></td>
    <td>Element type</td>
  </tr>
</thead>
<tr onclick="toggleCheckbox(this)">
  <td><label><input id="cb1" type="checkbox" /></label></td>
  <td>Checkbox 1</td>
  <td><input type="text" value="Product 1" /></td>
</tr>
<tr onclick="toggleCheckbox(this)">
  <td><label><input id="cb2" type="checkbox" /></label></td>
  <td>Checkbox 2</td>
  <td><input type="text" value="Product 2" /></td>
</tr>
<tr onclick="toggleCheckbox(this)">
  <td><label><input id="cb3" type="checkbox" /></label></td>
  <td>Checkbox 3</td>
  <td><input type="text" value="Product 3" /></td>
</tr>
<tr onclick="toggleCheckbox(this)">
  <td><label><input id="cb4" type="checkbox" /></label></td>
  <td>Checkbox 4</td>
  <td><input type="text" value="Card 1" /></td>
</tr>
</table>

CSS

tr, tr * {
  cursor: default;
}

JavaScript

/* $(document).ready(function() {
  $('table.test tr').click('toggleCheckbox();');
  
}); */

function toggleCheckbox(row) {
  var checkbox = $(row).find('input[type="checkbox"]');
  if (event.target === checkbox.get(0)) {
  	return;
  }
  var textbox = $(row).find('input[type="text"]');
  if (event.target === textbox.get(0)) {
  	if (checkbox.prop('checked') != true) {
    	checkbox.click();
    } 
  	return;
  }
  
  checkbox.click();
}