Question

我做过类似的事情。

<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>

我将等待你的回复，我非常感谢你们以前帮助我，希望你们这次能帮助我。

Answer 1

阅读此article

我更喜欢jQuery

这是 DEMO

<强> Another DEMO

Answer 2

我们可以接受代码并进行修改，例如
1. Javascript修改：
function toggleTB(what,elid) { if(what.checked) { document.getElementById(elid).disabled=1 } else { document.getElementById(elid).disabled=0 } }
2.复选框HTML代码修改
<input type="checkbox" name="sd3[]" value="mfi_nam9" onClick="toggleTB(this,'mfi_name1')" />Other(please specify): <input type="text" name="mfi_nam9" class="text required" id="mfi_name1" />
请注意，即使您从php代码生成这些文本框，我们也使用了每个文本框的ID不同。

Answer 3

向每个复选框添加onclick

<input type="checkbox" name="sd2[]" value="mfi_nam8" onClick="toggleTB(this)" />Other(please specify):

并将toggleTB声明为

function toggleTB(what){
    what.form.elements[what.value].disabled = what.checked;
}

Answer 4

Java脚本修改：

function toggleTB(what){

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

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

}

HTML修改：

<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>

注意：此处我使用ID而不是NAME来验证表单输入框元素。

我认为在相关的 CHECK BOX 的已检查事件中停用 TEXT BOX 是没有意义的。您可能想要启用 TEXT BOX ，只要有人检查复选框以指定其他内容，我不确定您要对此做什么。

如果您想按照我的意思做，请将JAVA SCRIPT行更改为以下 -

if(what.checked){theTB.disabled=0} // have placed 0 in place of 1
  else{theTB.disabled=1} // have placed 1 in place of 0
}

HTML INPUT-BOX如下 -

或者如果你想切换（启用/禁用）复选框，这是不可能的，因为你知道在禁用一个元素之后click事件不对元素做什么动作所以它将如何禁用：）

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

4 个答案: