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>