how to make a checkbox enable and disable a text box in multiple cases

Question

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.

xkeshav · Accepted Answer · 2011-03-10 06:13:23Z

1

Read this article

i would prefer jQuery

Here is DEMO

Another DEMO

answered Mar 10, 2011 at 6:13

xkeshav

54.2k47 gold badges183 silver badges256 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nyaro Over a year ago

i like this one but when i use jquery-1.5 my design is effected. so what to do, is there any other solutions other than jquery.

Saravanan · Accepted Answer · 2011-03-10 06:04:41Z

0

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.

answered Mar 10, 2011 at 6:04

Saravanan

7,8635 gold badges44 silver badges77 bronze badges

Comments

amit_g · Accepted Answer · 2011-03-10 06:09:34Z

0

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

answered Mar 10, 2011 at 6:09

amit_g

31.3k8 gold badges67 silver badges125 bronze badges

Comments

mahadeb · Accepted Answer · 2011-03-10 08:45:55Z

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

Collectives™ on Stack Overflow

how to make a checkbox enable and disable a text box in multiple cases

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related