how to make a checkbox enable and disable a text b

2019-06-14 13:25发布

问题:

I have done something like this.

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

But this is only used for one time.i need this function repeatedly in another rows also so how can i used this function for multiple times.

My form goes like this:

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

i will be waiting for ur response and i am very thankful to u guys for helping me previously and hope u will help me this time too.

回答1:

Read this article

i would prefer jQuery

Here is DEMO

Another DEMO



回答2:

We can take the code and do the modifications like
1. Javascript modifications :
function toggleTB(what,elid) { if(what.checked) { document.getElementById(elid).disabled=1 } else { document.getElementById(elid).disabled=0 } }
2. Checkbox HTML code modifications
<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" />
Note that we have used the ID's to be varying for each of the textboxes which can be generated even when you are generating these textboxes from the php codes.



回答3:

Add onclick to each of the checkbox

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

and declare toggleTB as

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


回答4:

Java Script modification :

function toggleTB(what){

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

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

}

HTML Modification :

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

Note: Here I have used ID rather than NAME to verify the form input box element.

I think this doesn't make sense to disable the TEXT BOX on checked event of the related CHECK BOX. You maybe want to enable the TEXT BOX whenever some one checked the check box to specify some other thing, I am not sure what you want to do with this.

If you want to do like what I guess, just change the JAVA SCRIPT lines as bellow -

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

OR if you think to toggle (enable/disable) the checkbox, this is not possible cause you know after disable an element the click event will not do action on the element so how it will be disable :)



标签: html forms input