JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<table>
<tr>
<th>Yes</th>
<th>No</th>
<th>Text</th>
<th>Select</th>
<th>textinput</th>
<th>Select 2</th>
</tr>
<tr>
<td>
<input class="yes" type="checkbox" checked/>
</td>
<td>
<input class="no" type="checkbox" />
</td>
<td>
<input type="text" value="1111" />
</td>
<td>
<select>
<option>A</option>
<option>B</option>
</select>
</td>
<td>
<input type="text" value="AAAAA" />
</td>
<td>
<select>
<option>A</option>
<option>B</option>
</select>
</td>
</tr>
<tr>
<td>
<input class="yes" type="checkbox" checked/>
</td>
<td>
<input class="no" type="checkbox" />
</td>
<td>
<input type="text" value="2222" />
</td>
<td>
<select>
<option>A</option>
<option>B</option>
</select>
</td>
<td>
<input type="text" value="BBBB" />
</td>
<td>
<select>
<option>A</option>
<option>B</option>
</select>
</td>
</tr>
<tr>
<td>
<input class="yes" type="checkbox" checked/>
</td>
<td>
<input class="no" type="checkbox" />
</td>
<td>
<input type="text" value="3333" />
</td>
<td>
<select>
<option>A</option>
<option>B</option>
</select>
</td>
<td>
<input type="text" value="CCCC" />
</td>
<td>
<select>
<option>A</option>
<option>B</option>
</select>
</td>
</tr>
</table>
CSS
table {
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
padding: 2px;
}
table,
th,
td {
text-align: center;
}
JavaScript
$('tr td input[type="checkbox"]').click(function() {
$(this).closest('tr').find(":input:not(.yes, .no)").prop('disabled', !this.checked);
$(this).closest('tr').find(":input(.no)").prop('checked', !this.checked);
$(this).prop('checked',!$(this).prop("checked"));
});