如何限制HTML输入类型CheckBoxes [英] How to limit HTML input type CheckBoxes
本文介绍了如何限制HTML输入类型CheckBoxes的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的datalist中有一个复选框，用于动态列出带有复选框的位置名称，当用户选择我需要传递id的位置名称时，从中选择一个。但是用户只能选择10个位置.......我怎样才能限制用户的选择.........
这里我的aspx代码：
I had a check boxes in my datalist for dynamically list the location name with checkboxes, when user select the location name i need to pass a id from which one is selected.............But user can select only 10 locations....... How can i limit the selection of user.........
here my aspx code:
<html>
<head>
<script type="text/javascript">
var arIntIds = new Array();
var counter = 1;
$(function () {
$("input[id^='chkName']").change(function () { CheckUnCheckAll(this); });
});
function CheckUnCheckAll(chk) {
if ($(chk).is(':checked')) {
PushToIntIds(counter);
}
else {
PullFromIntIds(counter);
}
}
function PushToIntIds(counter) {
arIntIds.push(counter);
alert("Selected Checkbox Count : " + arIntIds.length);
}
function PullFromIntIds(counter) {
arIntIds.pop(counter);
alert("Selected Checkbox Count : " + arIntIds.length);
}
function CheckValid() {
if (arIntIds.length > 10) {
alert("You can not select more then 10 checkbox!!");
return;
}
else {
alert('Move on ..');
}
}
</script>
</head>
<body>
<table style="width: 100%">
<tr>
<td style="width: 69px">
</td>
<td class="style3">
<asp:Label ID="Label1" runat="server" Text="Select City">
</td>
<td class="style2">
:</td>
<td style="width: 347px" colspan="3">
<asp:DropDownList ID="CityDDL" runat="server" AutoPostBack="True"
DataTextField="City_Name" DataValueField="City_ID"
onselectedindexchanged="CityDDL_SelectedIndexChanged" Width="200px">
</td>
<td>
</td>
</tr>
<tr>
<td class="style4">
</td>
<td class="style5">
</td>
<td class="style6">
</td>
<td colspan="3" class="style7">
</td>
<td class="style8">
</td>
</tr>
<tr>
<td style="width: 69px">
</td>
<td colspan="5">
<asp:Panel ID="Panel1" runat="server" BorderColor="#999999" BorderStyle="Solid"
Visible="False">
<asp:DataList ID="LocationDataList" runat="server" RepeatColumns="5"
RepeatDirection="Horizontal">
<itemstyle borderstyle="None" />
<itemtemplate>
<table width="150">
<tr><td width="10%"></td><td width="80%">
<input name="LocatIDChkBox" runat="server"
type="checkbox" value='<%#Eval("Locat_ID") %>' önclick="CheckUnCheckAll(LocatIDChkBox);"/>
<asp:Label ID="LocatNamelbl" runat="server" Text='<%# Eval("Locat_Name") %>'></td><td width="10%"></td></tr>
</table>
</itemtemplate>
</td>
<td>
</td>
</tr>
<tr>
<td style="width: 69px">
</td>
<td align="center" class="style1" colspan="5">
<asp:Button ID="SubmitBtn" runat="server" Text="Submit" Width="100px"
onclick="SubmitBtn_Click" OnClientClick="return CheckValid();" Visible="False" />
</td>
<td>
</td>
</tr>
<tr>
<td style="width: 69px">
</td>
<td class="style3">
</td>
<td class="style2">
</td>
<td style="width: 188px">
</td>
<td style="width: 347px">
<asp:HiddenField ID="HiddenField1" runat="server" />
</td>
<td style="width: 347px">
</td>
<td>
</td>
</tr>
</table>
</body>
</html>
<script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//check all
$("[id$='chkAll']").click(
function () {
$("INPUT[type='checkbox']").attr('checked', $("[id$='chkAll']").is(':checked'));
});
$("[id$='SubmitBtn']").click(function () {
var ISBN = [];
$("[id$='LocationDataList'] input[type=checkbox]:checked").each(function () {
ISBN.push($(this).val());
});
$("[id$='HiddenField1']").val(ISBN);
});
});
</script>
I am already using some of javascript functions but it is not working properly.............. Please anyone can help me?
I am already using some of javascript functions but it is not working properly.............. Please anyone can help me?
推荐答案
(function () {
(\"input[id^='chkName']\").change(function () { CheckUnCheckAll(this); });
});
function CheckUnCheckAll(chk) {
if (
("input[id^='chkName']").change(function () { CheckUnCheckAll(this); }); }); function CheckUnCheckAll(chk) { if (
(chk).is(':checked')) {
PushToIntIds(counter);
}
else {
PullFromIntIds(counter);
}
}
function PushToIntIds(counter) {
arIntIds.push(counter);
alert(\"Selected Checkbox Count : \" + arIntIds.length);
}
function PullFromIntIds(counter) {
arIntIds.pop(counter);
alert(\"Selected Checkbox Count : \" + arIntIds.length);
}
function CheckValid() {
if (arIntIds.length > 10) {
alert(\"You can not select more then 10 checkbox!!\");
return ;
}
else {
alert('Move on ..');
}
}
</script>
</head>
<body>
<table style=\"width: 100%\">
<tr>
<td style=\"width: 69px\">
</td>
<td class=\"style3\">
<asp:Label ID=\"Label1\" runat=\"server\" Text=\"Select City\">
</td>
<td class=\"style2\">
:</td>
<td style=\"width: 347px\" colspan=\"3\">
<asp:DropDownList ID=\"CityDDL\" runat=\"server\" AutoPostBack=\"True\"
DataTextField=\"City_Name\" DataValueField=\"City_ID\"
onselectedindexchanged=\"CityDDL_SelectedIndexChanged\" Width=\"200px\">
</td>
<td>
</td>
</tr>
<tr>
<td class=\"style4\">
</td>
<td class=\"style5\">
</td>
<td class=\"style6\">
</td>
<td colspan=\"3\" class=\"style7\">
</td>
<td class=\"styl e8\">
</td>
</tr>
<tr>
<td style=\"width: 69px\">
</td>
<td colspan=\"5\">
<asp:Panel ID=\"Panel1\" runat=\"server\" BorderColor=\"#999999\" BorderStyle=\"Solid\"
Visible=\"False\">
<asp:DataList ID=\"LocationDataList\" runat=\"server\" RepeatColumns=\"5\"
RepeatDirection=\"Horizontal\">
<itemstyle borderstyle=\"None\" />
<itemtemplate>
<table width=\"150\">
<tr><td width=\"1 0%\"></td><td width=\"80%\">
<input name=\"LocatIDChkBox\" runat=\"server\"
type=\"checkbox\" value='<%#Eval(\"Locat_ID\") %>' önclick=\"CheckUnCheckAll(LocatIDChkBox);\"/>
<asp:Label ID=\"LocatNamelbl\" runat=\"server\" Text='<%# Eval(\"Locat_Name\") %>'></td><td width=\"10%\"></td></tr>
</table>
</itemtemplate>
</td>
<td>
</td>
</tr>
<tr>
<td style=\"width: 69px\">
</td>
<td align=\"center\" class=\"style1\" colspan=\"5\">
<asp:Button ID=\"SubmitBtn\" runat=\"server\" Text=\"Submit\" Width=\"100px\"
onclick=\"SubmitBtn_Click\" OnClientClick=\"return CheckValid();\" Visible=\"False\" />
</td>
<td>
</td>
</tr>
<tr>
<td style=\"width: 69px\">
</td>
<td class=\"style3\">
</td>
<td class=\"style2\">
</td>
<td style=\"width: 188px\">
</td>
<td style=\"width: 347px\">
<asp:HiddenField ID=\"HiddenField1\" runat=\"server\" />
</td>
<td style=\"width: 347px\">
</td>
<td>
</td>
</tr>
</table>
</body>
</html>
<< span class=\"code-leadattribute\">script src=\"js/jquery-1.4.1.min.js\" type=\"text/javascript\"></script>
<script type=\"text/javascript\">
(chk).is(':checked')) { PushToIntIds(counter); } else { PullFromIntIds(counter); } } function PushToIntIds(counter) { arIntIds.push(counter); alert("Selected Checkbox Count : " + arIntIds.length); } function PullFromIntIds(counter) { arIntIds.pop(counter); alert("Selected Checkbox Count : " + arIntIds.length); } function CheckValid() { if (arIntIds.length > 10) { alert("You can not select more then 10 checkbox!!"); return; } else { alert('Move on ..'); } } </script> </head> <body> <table style="width: 100%"> <tr> <td style="width: 69px"> </td> <td class="style3"> <asp:Label ID="Label1" runat="server" Text="Select City"> </td> <td class="style2"> :</td> <td style="width: 347px" colspan="3"> <asp:DropDownList ID="CityDDL" runat="server" AutoPostBack="True" DataTextField="City_Name" DataValueField="City_ID" onselectedindexchanged="CityDDL_SelectedIndexChanged" Width="200px"> </td> <td> </td> </tr> <tr> <td class="style4"> </td> <td class="style5"> </td> <td class="style6"> </td> <td colspan="3" class="style7"> </td> <td class="style8"> </td> </tr> <tr> <td style="width: 69px"> </td> <td colspan="5"> <asp:Panel ID="Panel1" runat="server" BorderColor="#999999" BorderStyle="Solid" Visible="False"> <asp:DataList ID="LocationDataList" runat="server" RepeatColumns="5" RepeatDirection="Horizontal"> <itemstyle borderstyle="None" /> <itemtemplate> <table width="150"> <tr><td width="10%"></td><td width="80%"> <input name="LocatIDChkBox" runat="server" type="checkbox" value='<%#Eval("Locat_ID") %>' önclick="CheckUnCheckAll(LocatIDChkBox);"/> <asp:Label ID="LocatNamelbl" runat="server" Text='<%# Eval("Locat_Name") %>'></td><td width="10%"></td></tr> </table> </itemtemplate> </td> <td> </td> </tr> <tr> <td style="width: 69px"> </td> <td align="center" class="style1" colspan="5"> <asp:Button ID="SubmitBtn" runat="server" Text="Submit" Width="100px" onclick="SubmitBtn_Click" OnClientClick="return CheckValid();" Visible="False" /> </td> <td> </td> </tr> <tr> <td style="width: 69px"> </td> <td class="style3"> </td> <td class="style2"> </td> <td style="width: 188px"> </td> <td style="width: 347px"> <asp:HiddenField ID="HiddenField1" runat="server" /> </td> <td style="width: 347px"> </td> <td> </td> </tr> </table> </body> </html> <script src="js/jquery-1.4.1.min.js" type="text/javascript"></script> <script type="text/javascript">
这篇关于如何限制HTML输入类型CheckBoxes的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
