CODEWITHSUNDEEP
c#asp.net
Russ
Russ

Reputation: 435

Trouble checking checkbox

I have received several reports from people not being able to register on my website due to them not being able to check a checkbox stating they agree to the Terms of Use. Basically, once the checkbox is checked a button is enabled to allow one to continue with registration.

I've tried myself and a lot of the time, clicking on the actual checkbox doesn't do anything but clicking on the associated label usually does. I've given that as the workaround but I'd really like to have clicking on the actual checkbox work all of the time.

The registration page is: http://www.lonelycache.com/Account/GeocachingAuth.aspx

The page form has the following for the checkbox (formatted for readability):

<asp:CheckBox ID="AgreeTOUCheckBox"
     AutoPostBack="true"
     runat="server" Text="&ensp;I have read and agree to the"
     OnCheckedChanged="AgreeTOUCheckBox_OnCheckChanged" />

The generated html is (formatted for readability):

<input id="MainContent_AgreeTOUCheckBox" type="checkbox"
       name="ctl00$MainContent$AgreeTOUCheckBox"
       onclick="javascript:setTimeout(&#39;__doPostBack(\&#39;ctl00$MainContent$AgreeTOUCheckBox\&#39;,\&#39;\&#39;)&#39;, 0)"
/>
<label for="MainContent_AgreeTOUCheckBox"> I have read and agree to the</label>

Any ideas on what I might do to get this to work consistently?

Upvotes: 1

Views: 135

Answers (3)

Win
Win

Reputation: 62260

I tested your site. I can't check either.

According to what I tested, your checkbox is just to enable the button. If so, you can just simply use jQuery to do that.

Here is the sample:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#<%= AgreeTOUCheckBox.ClientID %>').click(function () {
            if ($('#<%= AgreeTOUCheckBox.ClientID %>').attr('checked')) {
                $('#<%= AuthorizeButton.ClientID %>').removeAttr("disabled");
            } else {
                $('#<%= AuthorizeButton.ClientID %>').prop("disabled", "disabled");
            }
        });
    });
</script>

<asp:CheckBox ID="AgreeTOUCheckBox" runat="server" 
    Text="&ensp;I have read and agree to the" />
<asp:Button runat="server" ID="AuthorizeButton" 
    Text="Authorize" Enabled="False"/>

Upvotes: 1

Grant Clements
Grant Clements

Reputation: 984

This problem has nothing to do with ASP.NET. I've checked your website and you have a DIV (id: boots) that is sitting on top of the majority of the checkbox (it displays the boots image on the left as it's background image).

If you set the width of that div to be 180px rather than 200px, it should solve your problem,

Upvotes: 3

mccee
mccee

Reputation: 1667

Your checkbox is working fine, it's just hidden behind another panel. If you click and drag below the checkbox to highlight the page itself, you can see your left footprint panel is hiding most of the checkbox.

Try clicking just the very right edge of the checkbox and it will work.

It's probably as easy as adjusting your style like so:

<div style="padding-left:10px">
    <asp:CheckBox ID="AgreeTOUCheckBox"
         AutoPostBack="true"
         runat="server" Text="&ensp;I have read and agree to the"
         OnCheckedChanged="AgreeTOUCheckBox_OnCheckChanged" />
</div>

The same is true of your Authorize button. Try clicking the very left of that and it won't work.

Let me know if that does it for you.

Upvotes: 3

Related Questions