JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<form id="ruleListForm" action="/update" method="post">
<table border="1">
<thead>
<tr>
<th data-field="id"> ID </th>
<th data-field="ruleName" > RuleName </th>
<th data-field="fixed" > Fixed </th>
<th data-field="repeats" > Repeats </th>
<th data-field="parameter" >Parameter Value overwrite </th>
</tr>
</thead>
<tbody id="ruleListContainer">
<tr class="rule">
<td><input type="hidden" name="ruleList[0].id" value="2" /> 2</td>
<td><input type="hidden" name="ruleList[0].ruleName" value="ABCDEFGH" /> ABCDEFGH</td>
<td><input type="radio" name="radio_enable_0" value="fixed" /></td>
<td><input type="radio" name="radio_enable_0" value="true">
<select name="ruleList[].repeats" disabled style="width: 80px;">
<option value="">--Select--</option>
<option value="weekly" />
weekly
<option value="monthly" />
monthly
<option value="quaterly" />
quaterly
<option value="half-yearly" />
half-yearly
<option value="annually" />
annually
</select>
</td>
<td>
<table border="1">
<tr >
<td><input type="hidden" name="ruleList[0].ruleAssignmentParameter[0].parameterName" value="Param 9" /> Param 9</td>
<td><input type="hidden" value="6549" /> 6549</td>
<td> <input type="text" name="ruleList[0].ruleAssignmentParameter[0].overwriteValue" value=""size="2"height="0.01"> or
<select style="width: 80px;">
<option value="Minimum Sales"/>Minimum Sales
<option value="Service Amount"/>Service Amount
<option value="Promotional...
JavaScript
$('input[type="radio"]').on('click', function() {
var val = $(this).val(),
selectId = $(this).closest('tr').find('select').first();
if ($(this).val() === 'true') {
$(selectId).prop("disabled", false);
}
else {
$(selectId).prop("disabled", true);
}
});