ASP.Net C# 中的 JQuery 复选框迭代

Question

我正在尝试遍历 ASP.Net 网页中的复选框，如果选中了任何复选框，那么我想启用页面上的按钮，但如果没有选中，我想禁用按钮。我正在编写下面的示例代码以启用该按钮，但它无法正常工作。关于如何解决它的任何想法？

<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>

这里是生成的html源码：

<!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>

Answer 1

$(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();
});