html - div叠加输入

Question

我正在开发一个表单，该表单中有一个复选框。如果我选中该复选框，则该复选框之前的输入字段必须隐藏在不透明的 div 后面，因此用户无法再填写它。但是如果我使用 z-index，TD 元素会改变高度。

代码:

<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

如果 checkbox 被 checked 并启用当 checkbox 为 unchecked 时。

你可以这样做

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

See working demo.