JQuery checkbox iteration in ASP.Net C#

Question

I'm trying to iterate over checkboxes in an ASP.Net web page, and if any of the checkboxes are checked, then I want to enable the button on the page, but if none are checked, I want to disable the button. I'm working on the sample code below to enable the button, but it isn't working correctly. Any ideas on how to fix it?

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:CheckBox ID="CheckBox1" runat="server" CssClass="cb" />
        <asp:CheckBox ID="CheckBox2" runat="server" CssClass="cb" />
        <asp:Button ID="Button1" runat="server" Enabled="false"
            Text="Button" />

    </div>
    </form>
    <script language="jquery" src="js/jquery-1.3.2.js" type="text/javascript"></script>
    <script type="text/javascript" >
        $(document).ready(function() {
            $(".cb").each(function() {
                if ($(".cb").checked == true) {
                    $(".Button1").attr("enabled", "enabled");
                }
            });
        });
    </script>
</body>
</html>

Here is the generated html source:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>

</title></head>
<body>
    <form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE"   value="/wEPDwULLTE1Njg3NDk5NTNkGAEFHl9fQ29udHJvbHNSZXF1aXJlUG9zdEJhY2tLZXlfXxYCBQlDaGVja0JveDEFCUNoZWNrQm94Mpl7Qkz0EKHxPd7eY30WXym8Ak+i" />
</div>

<div>

    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION"     value="/wEWBALtr+KAAgKC5Ne7CQL/49e7CQKM54rGBotIDgtejJCfMu5Zh8m/guHs+kzK" />
</div>
    <div>
       <span class="cb"><input id="CheckBox1" type="checkbox" name="CheckBox1" /></span>
       <span class="cb"><input id="CheckBox2" type="checkbox" name="CheckBox2" /></span>
       <input type="submit" name="Button1" value="Button" id="Button1" disabled="disabled" />

    </div>
    </form>
    <script language="jquery" src="js/jquery-1.3.2.js" type="text/javascript"></script>
    <script type="text/javascript" >
        $(document).ready(function() {
            $(".cb").each(function() {
                if ($(".cb").checked == true) {
                    $(".Button1").attr("enabled", "enabled");
                }
            });
        });
    </script>
</body>
</html>

It would be a lot easier for us to help if you posted the generated HTML instead of the .aspx page. — Tomas Aschan
– Tomas Aschan, Commented Sep 3, 2009 at 16:26

RaYell · Accepted Answer · 2009-09-03 16:27:31Z

2

$(document).ready(function() {
    function setButton() {
         $('.Button1').attr('disabled', $('.cb:checked').length === 0);
    }

    // run check after changing any of the checkboxes
    $('.cb').change(setButton);

    // initial check
    setButton();
});

answered Sep 3, 2009 at 16:27

RaYell

70.6k20 gold badges127 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Russ Clark Over a year ago

I'm having a problem with the code, the initital check is working fine, and disables the button as it should, but when I check one of the checkboxes, them $('.cb').change(setButton) never gets called. Any ideas?

RaYell Over a year ago

Try changing the event from change to click.

Collectives™ on Stack Overflow

JQuery checkbox iteration in ASP.Net C#

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related