Question

I am developing a form and in that form there’s a checkbox. If I check the checkbox then the input field before the checkbox has to hide behind an opaque div, so the user can’t fill it in anymore.
But if I work with z-index the TD element changes the height.

The code:

<table class="prijzen">
<tr>
<td Verhuurperiode</td>
<td>Prijs</td>
<td>Geen verhuur</td>
</tr>
<tr>
<td class="periode_naam" style="padding-bottom:2px;">Maand:</td>
 <td class="periode_prijs"><input type="Text" name="standaard_prijs_maand" maxlength="7"     
size="5" class="input_prijzen"></td>
<td class="geen_verhuur"><div id="verbergen_prijsvak"></div><div style="float:left;"><input    
type="Checkbox"></div><div class="align_checkbox">&nbsp;Huren per maand is niet   
mogelijk</div></td>
</tr>
</table>

CSS:

.input_prijzen{
    height:17px;
    font-size:10px;
    position:relative;
    left:0px;
    top:0px;
    z-index:100;
}
#verbergen_prijsvak{
    position:relative;
    left:0px;top:0px;
    z-index:1;
    background-color:red;
    filter:alpha(opacity=25);
    opacity:0.25;
    width:100px;
    height:20px;
}

Answer 1

Doing what you are trying to do will not be a good practice instead try to disable the textbox if the checkbox is checked and enable it when checkbox is unchecked.

You can do something like this

$('input[type=checkbox]').on("click",function(){
if($(this).attr("checked"))
$('#txtbox').attr("disabled","disabled");
else
$('#txtbox').removeAttr("disabled");
});

See working demo.