I have a form with a table containing 3 columns. I need to use the fadeIn and fadeOut functions on the textbox in the third column based on the checkbox's state. However, when I enable the checkbox, the width of the table column changes. How can I fix this issue?
Check out the code here
Here is the code:
<form action="" method="POST>
<table width="50%" cellpadding="4" cellspacing="1" border="1">
<tr>
<td width="5%" align="center"><input name="chk_surname" id="chk_surname" type="checkbox" onclick="enable(this.id,'surname','td_surname')"></td>
<td width="10%" align="center">Surname</td>
<td width="35%" class="td_surname" style="display:none;" align="center"><input type="text" name="surname" id="surname" /></td>
</tr>
</table>
</form>
Here is the JavaScript code:
<script type="text/javascript">
function enable(id,name,className)
{
$(document).on('change','#'+id, function()
{
var checked = $(this).is(":checked");
var index = $(this).parent().index();
if(checked) {
$('.'+className).fadeIn(100);
}
else {
$('.'+className).fadeOut(100);
}
});
}
</script>
Screenshot: