By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,377 Members | 1,706 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,377 IT Pros & Developers. It's quick & easy.

Hard Checkboxes Question

P: n/a
I am pretty new to using JavaScript for web applications. I need to
get some code that disables the input text box until the checkbox
beside is checked. Any examples of accomplishing this task?

Thanks.

Jul 23 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a
<li************@hotmail.com> wrote in message
news:11*********************@c13g2000cwb.googlegro ups.com...
I am pretty new to using JavaScript for web applications. I need to
get some code that disables the input text box until the checkbox
beside is checked. Any examples of accomplishing this task?

Thanks.

Will this help? Watch for word-wrap.

<html>
<head>
<title>boxtext1.htm</title>
</head>
<body>
<form action="" method="post" name="form1">
<input type="checkbox" onclick="document.form1.data.disabled=false">
<input type="text" name="data" disabled></p>
</form>
</body>
</html>

Or this:

<html>
<head>
<title>boxtext2.htm</title>
<script type="text/javascript">
function enable() {
var form = document.form1;
form.data.disabled = false;
form.data.style.backgroundColor = "#FFFFFF";
form.data.focus();
}
</script>
</head>
<body>
<form name="form1" method="post" action="">
<input type="checkbox" onclick="enable()">
<input type="text" name="data" disabled
style="background-color:#EEEEEE"></p>
</form>
</body>
</html>
Jul 23 '05 #2

P: n/a
"McKirahan" <Ne**@McKirahan.com> wrote in message
news:Vo********************@comcast.com...

[snip]

Please ignore "</p>" in my prevous post.

Jul 23 '05 #3

P: n/a
On Sun, 23 Jan 2005 22:34:09 -0600, McKirahan <Ne**@McKirahan.com> wrote:

[snip]
<input type="text" name="data" disabled>


Disabling a form control in HTML will render it useless to anyone without
Javascript. The better approach is to disable the control with Javascript
- then you know the control can be enabled later.

[snip]

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #4

P: n/a
Thanks for the replies. I think I am going to go with the 'or this:'
solution provided above. It seems to work with only minor tweaking to
handle the user checking and unchecking the box.
Thanks again. U guys are tooooo smart!

Jul 23 '05 #5

P: n/a
li************@hotmail.com wrote:
Thanks for the replies. I think I am going to go with the 'or this:'
solution provided above. It seems to work with only minor tweaking to handle the user checking and unchecking the box.
Thanks again. U guys are tooooo smart!


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>untitled</title>

<script type="text/javascript">

function initEnable()
{
function set_enable()
{
this.tbox.disabled = !this.checked;
this.tbox.select();
if (!this.checked)
this.tbox.value = this.tbox.defaultValue;
}

var f = document.forms, flen = f.length, el, els, j;
for (var i = 0; i < flen; ++i)
{
els = document.forms[i].elements;
j = 0;
for (; j < els.length; ++j)
{
el = els[j];
if (/\benable\b/.test(el.className))
{
el.tbox = els[++j];
el.onclick = set_enable;
el.onclick();
}
}
}
}

window.onload = initEnable;

</script>
</head>
<body>
<form style="width:180px;">
<input class="enable" type="checkbox" />:::<input type="text" name="t1"
value=" enter name" />
<input class="enable" type="checkbox" />:::<input type="text" name="t2"
value=" enter address" />
<input class="enable" type="checkbox" />:::<input type="text" name="t3"
value=" enter phone" />
<input class="enable" type="checkbox" />:::<input type="text" name="t4"
value=" enter email" />
<br />
<input type="checkbox" /><input type="text" name="t5" value="test" />
</form>
</body>
</html>

Jul 23 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.