Re: Having a checkbox make something available when it's checked.

Tech Tip: Click here to run a free scan for Windows Errors and optimize PC performance

Ahh, you are correct--wow, that's really annoying. I tend to use HTML controls wherever possible, so I've honestly never ran across this.

Okay, here's what I came up with. This is more of a snafu battle between FF and IE--out of all of them, Safari seems the most forgiving. Hah. I tested in FF2, FF7, and Safari. So far, so good.

Anyway, I extracted this into a method, but I'll show both inline and the method.

Html (all of it):

<html xmlns="http://www.w3.org/1999/xhtml"; >
<head runat="server">
<title>Untitled Page</title>
<script language="javascript" type="text/javascript">
function toggleButton(checkedValue)
{
// You can remove the alerts; they were for testing!
var button = document.getElementById('btnToCheckOut');
alert("currently disabled: " + button.disabled);
alert("checked value: " + checkedValue.toString());
button.disabled = checkedValue;
alert("now disabled: " + button.disabled);
return true;
}

</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="checkbox" onclick="javascript:toggleButton(!this.checked);" />Accept?
<asp:Button runat="server" ID="btnToCheckOut" Enabled="false" Text="Checkout" />
</div>
</form>
</body>
</html>

and here's inline without the helper method:

<input type="checkbox" onclick="javascript: var button = document.getElementById('btnToCheckOut'); button.disabled = !this.checked; return true;" />

That's modifying that <asp:Button> object. From what I can tell, IE doesn't care, but FireFox wants the attribute assignment separated out from the getElementById call. I'm sure Google could tell why... perhaps it has something to do with the page loading order of how the controls hit the page.

HTH!

-dl

--
David R. Longnecker
http://blog.tiredstudent.com

That works fine except that I'm using an ASP:Button with code behind
it. That's why the funny name.

Any thoughts on getting this to work with ASP controls?

TIA - Jeff.

"David R. Longnecker" <dlongnecker@xxxxxxxxxxxxxxxx> wrote in message
news:a0e9b9da345a28ca5d3c6f4ca026@xxxxxxxxxxxxxxxxxxxxxxx

Jeff-

The Ctl00$... isn't necessary (as far as I know) on either of the
browsers; that's the control hierarchy generated by .NET.
getElementById should be able to find the control simply by it's Id
attribute.

<div>
<input type="checkbox"
onclick="javascript:document.getElementById('btnToCheckOut').disabled
=!this.checked;
return true;" />Accept?
<button id="btnToCheckOut" disabled="disabled">Checkout</button>
</div>
Tested in FF2, IE7, and Safari and works just fine.

HTH.

-dl

--
David R. Longnecker
http://blog.tiredstudent.com
I have a check box with javascript code attached to it that will
allow me to enable an 'accept' butten when the person has checked
the box. The code is:

input type="checkbox" name="checkbox"
onclick="javascript:document.getElementById('ctl00$MainPage$btnToChe
ck out').disabled=!this.checked; return true; " />I

The code works fine in IE - the button becomes enabled when the
check box is clicked. But if Firefox it doesn't work.

Any thoughts?

TIA - Jeff.



.

Quantcast