2

我正在开发一个表格，在那个表格中有一个复选框。如果我选中复选框，则复选框之前的输入字段必须隐藏在不透明的 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;
}
4

2 回答 2

3

做你想做的事情不是一个好习惯，而是尝试禁用textboxif the checkboxischecked并启用它 when checkboxis unchecked。

你可以做这样的事情

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

请参阅工作演示。

于 2012-08-25T08:23:42.567 回答
0

“隐藏”另一个 div 后面的文本输入字段以阻止用户输入文本不是最佳做法。实现此效果的最佳方法是使用 javascript 将文本输入设置为禁用。

这是一个演示 - http://jsfiddle.net/nsuvx/1/

于 2012-08-25T08:08:43.870 回答