|
| |
|
|
kitty6
Posts: 150
Joined: 10/15/2005
Status: offline
 |
checkbox and enable - 8/8/2008 18:52:42
I have a form in which I would like to enable some text boxes based on a checkboxes.
Example:
If say checkbox one is checked, then enable text boxes 1, 2, 3, and 4
If say checkbox two is checked, then enable text boxes 5,6,7 and 8
If say checkbox three is checked, then enable text boxes 9, 10 and 11
All the checkboxes would be disable as default and depending on which checkbox is checked, then the proper text boxes would become enabled.
Not exactly sure how to go about this.
Thanks.
|
|
|
|
TexasWebDevelopers
Posts: 202
Joined: 2/22/2002
From:
Status: offline
|
RE: checkbox and enable - 8/9/2008 19:30:08
Here is a javascript solution:
http://www.texaswebdevelopers.com/examples/checkbox-textenable.asp
<script language="javascript">
<!--hide on
function enableField1234()
{
document.form1.textbox1.disabled=false;
if (document.form1.textbox1.value == "disabled")
document.form1.textbox1.value = "";
document.form1.textbox1.style.border = '1px solid #66CC66';
document.form1.textbox2.disabled=false;
if (document.form1.textbox2.value == "disabled")
document.form1.textbox2.value = "";
document.form1.textbox2.style.border = '1px solid #66CC66';
document.form1.textbox3.disabled=false;
if (document.form1.textbox3.value == "disabled")
document.form1.textbox3.value = "";
document.form1.textbox3.style.border = '1px solid #66CC66';
document.form1.textbox4.disabled=false;
if (document.form1.textbox4.value == "disabled")
document.form1.textbox4.value = "";
document.form1.textbox4.style.border = '1px solid #66CC66';
}
function enableField5678()
{
document.form1.textbox5.disabled=false;
if (document.form1.textbox5.value == "disabled")
document.form1.textbox5.value = "";
document.form1.textbox5.style.border = '1px solid #66CC66';
document.form1.textbox6.disabled=false;
if (document.form1.textbox6.value == "disabled")
document.form1.textbox6.value = "";
document.form1.textbox6.style.border = '1px solid #66CC66';
document.form1.textbox7.disabled=false;
if (document.form1.textbox7.value == "disabled")
document.form1.textbox7.value = "";
document.form1.textbox7.style.border = '1px solid #66CC66';
document.form1.textbox8.disabled=false;
if (document.form1.textbox8.value == "disabled")
document.form1.textbox8.value = "";
document.form1.textbox8.style.border = '1px solid #66CC66';
}
function enableField91011()
{
document.form1.textbox9.disabled=false;
if (document.form1.textbox9.value == "disabled")
document.form1.textbox9.value = "";
document.form1.textbox9.style.border = '1px solid #66CC66';
document.form1.textbox10.disabled=false;
if (document.form1.textbox10.value == "disabled")
document.form1.textbox10.value = "";
document.form1.textbox10.style.border = '1px solid #66CC66';
document.form1.textbox11.disabled=false;
if (document.form1.textbox11.value == "disabled")
document.form1.textbox11.value = "";
document.form1.textbox11.style.border = '1px solid #66CC66';
}
//hide off-->
</script>
Check the box to enable the elements.<br /><br />
<form name="form1" id="form1">
checkbox1 <input name="checkbox1" type="checkbox" value="" onClick="return enableField1234();"/><br />
<input name="textbox1" type="text" disabled value="disabled"/>
<input name="textbox2" type="text" disabled value="disabled"/>
<input name="textbox3" type="text" disabled value="disabled"/>
<input name="textbox4" type="text" disabled value="disabled"/><br /><br />
checkbox2 <input name="checkbox2" type="checkbox" value="" onClick="return enableField5678();"/><br />
<input name="textbox5" type="text" disabled value="disabled"/>
<input name="textbox6" type="text" disabled value="disabled"/>
<input name="textbox7" type="text" disabled value="disabled"/>
<input name="textbox8" type="text" disabled value="disabled"/><br /><br />
checkbox3 <input name="checkbox3" type="checkbox" value="" onClick="return enableField91011();"/><br />
<input name="textbox9" type="text" disabled value="disabled"/>
<input name="textbox10" type="text" disabled value="disabled"/>
<input name="textbox11" type="text" disabled value="disabled"/>
</form>
| |
|
|
|
kitty6
Posts: 150
Joined: 10/15/2005
Status: offline
|
RE: checkbox and enable - 8/9/2008 20:47:01
That works but just one problem. When you check the box it enables the fields but when you uncheck the box it does not go back to disabled.
I would like to if checked enable the fields and if you go back and uncheck the box if should go back to disabled.
Thanks.
| |
|
|
|
TexasWebDevelopers
Posts: 202
Joined: 2/22/2002
From:
Status: offline
|
RE: checkbox and enable - 8/9/2008 21:48:53
You didn't specify that in your first request.
This is also really klugy.
What are you trying to do?
Why give the user the ability to enable/disable text boxes in the first place?
Wouldn't it make more sense to hide the textboxes until the checkbox is checked--more to save space in the layout than for any other reason?
Otherwise, this is very un-intuitive and user un-friendly.
< Message edited by TexasWebDevelopers -- 8/10/2008 19:01:27 >
| |
|
|
|
kitty6
Posts: 150
Joined: 10/15/2005
Status: offline
|
RE: checkbox and enable - 8/9/2008 22:31:09
hide the textboxes would work as well. How would that code look?
Thanks.
| |
|
|
|
TexasWebDevelopers
Posts: 202
Joined: 2/22/2002
From:
Status: offline
|
RE: checkbox and enable - 8/10/2008 18:58:14
Here is an easy way to do it with CSS.
Example: http://www.texaswebdevelopers.com/examples/show-hide-css.asp
<script type="text/javascript" language="JavaScript">
<!--
function HideContent(e) {
document.getElementById(e).style.display = "none";
}
function ShowContent(e) {
document.getElementById(e).style.display = "block";
}
function FlipDisplay(e) {
if(document.getElementById(e).style.display == "none") { document.getElementById(e).style.display = "block"; }
else { document.getElementById(e).style.display = "none"; }
}
//-->
</script>
Check the box to enable the elements.<br /><br />
<form name="form1" id="form1">
checkbox1 <input name="checkbox1" type="checkbox" value="" onClick="FlipDisplay('div1');">
<br />
<div id="div1" style="display:none;">
<input name="textbox1" type="text"/>
<input name="textbox2" type="text"/>
<input name="textbox3" type="text"/>
<input name="textbox4" type="text"/>
</div>
checkbox2 <input name="checkbox2" type="checkbox" value="" onClick="FlipDisplay('div2');"/><br />
<div id="div2" style="display:none;">
<input name="textbox5" type="text"/>
<input name="textbox6" type="text"/>
<input name="textbox7" type="text"/>
<input name="textbox8" type="text"/>
</div>
checkbox3 <input name="checkbox3" type="checkbox" value="" onClick="FlipDisplay('div3');"/><br />
<div id="div3" style="display:none;">
<input name="textbox9" type="text"/>
<input name="textbox10" type="text"/>
<input name="textbox11" type="text"/>
</form>
</div>
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
