JSFiddle - React, Tailwind, and code Playground
HTML
<table>
<tr>
<td>
<input name="checkbox[1]" type="checkbox" value="0" />
</td>
<td>
<input name="items[1]" type="text" value="Forbiden Rice" />
</td>
<td>
<input name="quantity[1]" type="text" value="1" />
</td>
<td>
<select name="esquantity[1]" req="false">
<option value="" selected>Choose Quantity</option>
<option value="1">1</option>
</select>
</td>
</tr>
<tr>
<td>
<input name="checkbox[2]" type="checkbox" value="1" />
</td>
<td>
<input name="items[2]" type="text" value="Organic Double White Rice " />
</td>
<td>
<input name="quantity[2]" type="text" value="1" />
</td>
<td>
<select name="esquantity[2]" req="false">
<option value="" selected>Choose Quantity</option>
<option value="1">1</option>
</select>
</td>
</tr>
<input type="submit" name="Submit" value="Submit" />
</table>
JavaScript
$(function () {
$("input[name^='checkbox']").change(function () {
var id = this.name.substring(8);
if (this.checked) {
$("[name='esquantity" + id + "']").attr("req", "true");
} else {
$("[name='esquantity" + id + "']").attr("req", "false");
}
//console.log($("[name='esquantity" + id + "']").attr("req"));
});
$("input[name='Submit']").click(function () {
var i;
for(i = 1; i <= parseInt($("[name^='esquantity']").length); i++) {
if ($("[name='esquantity[" + i + "]']").attr("req") == "true" &&
$("[name='esquantity[" + i + "]']").val() == "")
alert("Please select a value for the required lists");
}
});
});