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

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Mufasa - 25 Mar 2008 22:49 GMT

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$btnToCheckout').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.

Reply to this Message

David R. Longnecker - 26 Mar 2008 15:39 GMT

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.
[quoted text clipped - 10 lines]
>
> TIA - Jeff.

Reply to this Message

Mufasa - 26 Mar 2008 17:50 GMT

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.

> Jeff-
>
[quoted text clipped - 33 lines]
>>
>> TIA - Jeff.

Reply to this Message

David R. Longnecker - 26 Mar 2008 20:24 GMT

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.
[quoted text clipped - 40 lines]
>>>
>>> TIA - Jeff.

Reply to this Message

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

Free Magazines