Html 如何使复选框在多种情况下启用和禁用文本框_Html_Forms_Input

Html 如何使复选框在多种情况下启用和禁用文本框

html forms input

Html 如何使复选框在多种情况下启用和禁用文本框,html,forms,input,Html,Forms,Input,我做过类似的事情 <html> <head> <script type="text/javascript">  </script> </head> <body>

我做过类似的事情

<html>
<head>
<script type="text/javascript">
<!--
function toggleTB(what){
if(what.checked){document.theForm.theTB.disabled=1}
else{document.theForm.theTB.disabled=0}}
//-->
</script>
</head>
<body>
<form name="theForm">
<input type="checkbox" name="theCB" onClick="toggleTB(this)">Toggle The Text Box<br>
<input type="text" name="theTB" value="asdf">
</form>
</body>
</html>


切换文本框

但这只使用了一次。我还需要在另一行中重复使用此函数，因此如何才能多次使用此函数

我的表格是这样的：

 <tr>    
 <td style="border-top:none; text-decoration:underline;" >Specific operations/procedures</td>
 <td>
 <input type="checkbox" name="sd3[]" value="mfi_nam9" />Other(please specify):
 <input type="text" name="mfi_nam9" class="text required" id="mfi_name" 
 </td>
 </tr>
 <tr>    
 <td style="border-top:none; text-decoration:underline;" >General principles/strategies</td>
 <td>
 <input type="checkbox" name="sd2[]" value="mfi_nam8" />Other(please specify):
 <input type="text" name="mfi_nam8" class="text required" id="mfi_name" 
 </td>
 </tr>


具体操作/程序
其他（请具体说明）：
我们可以获取代码并进行修改，如

1.Javascript修改：


功能切换TB（什么，elid）
{
如果（选中什么）
{
document.getElementById（elid）.disabled=1
}
其他的
{
document.getElementById（elid）.disabled=0
}
}



2.复选框HTML代码修改


其他（请具体说明）：



请注意，我们已经使用ID来改变每个文本框，即使您是从php代码生成这些文本框时，也可以生成这些文本框。
将onclick添加到每个复选框中
<input type="checkbox" name="sd2[]" value="mfi_nam8" onClick="toggleTB(this)" />Other(please specify):

读这个
我更喜欢jQuery
这里是
Java脚本修改：
function toggleTB(what){

var theTB = document.getElementById(what.value); 

if(what.checked){theTB.disabled=1}
else{theTB.disabled=0}

<table>
    <tr>    
     <td style="border-top:none; text-decoration:underline;" >Specific operations/procedures</td>
     <td>
     <input type="checkbox" name="sd3[]" onClick="toggleTB(this)" value="mfi_nam9"  />Other(please specify):
     <input type="text" name="mfi_nam9"  id="mfi_nam9" class="text required" />
     </td>
     </tr>
     <tr>    
     <td style="border-top:none; text-decoration:underline;" >General principles/strategies</td>
     <td>
     <input type="checkbox" name="sd2[]" onClick="toggleTB(this)" value="mfi_nam8" />Other(please specify):
     <input type="text" name="mfi_nam8" id="mfi_nam8" class="text required" />
     </td>  
     </tr>

</table>

}
HTML修改：
function toggleTB(what){

var theTB = document.getElementById(what.value); 

if(what.checked){theTB.disabled=1}
else{theTB.disabled=0}

<table>
    <tr>    
     <td style="border-top:none; text-decoration:underline;" >Specific operations/procedures</td>
     <td>
     <input type="checkbox" name="sd3[]" onClick="toggleTB(this)" value="mfi_nam9"  />Other(please specify):
     <input type="text" name="mfi_nam9"  id="mfi_nam9" class="text required" />
     </td>
     </tr>
     <tr>    
     <td style="border-top:none; text-decoration:underline;" >General principles/strategies</td>
     <td>
     <input type="checkbox" name="sd2[]" onClick="toggleTB(this)" value="mfi_nam8" />Other(please specify):
     <input type="text" name="mfi_nam8" id="mfi_nam8" class="text required" />
     </td>  
     </tr>

</table>

如下所示的HTML输入框-


或者，如果您认为要切换（启用/禁用）复选框，这是不可能的，因为您知道禁用元素后，单击事件不会对元素执行操作，因此它将如何禁用：）
我喜欢此选项，但当我使用jquery-1.5时，我的设计会受到影响。那么该怎么办呢，除了jquery还有其他解决方案吗。