asp.net中的Javascript客户端验证
我有下拉列表相关的复选框列表和单选按钮组相关的复选框列表。代码示例如下:asp.net中的Javascript客户端验证,javascript,asp.net,Javascript,Asp.net,我有下拉列表相关的复选框列表和单选按钮组相关的复选框列表。代码示例如下: <table class="style1"> <tr> <td class="style10" colspan="6"> </td> </tr> <tr> <td class="style6">
<table class="style1">
<tr>
<td class="style10" colspan="6">
</td>
</tr>
<tr>
<td class="style6">
<asp:CheckBox ID="chkBoxChanl" AutoPostBack="false"
runat="server" Text="Channel"
CssClass="ChkBoxStyle" Font-Size="Small"
/> </td>
<td class="style7">
<asp:DropDownList ID="ddlChannel" runat="server" CssClass="ddl">
</asp:DropDownList> </td>
<td class="style6">
<asp:CheckBox ID="chkBoxParty" runat="server" Text="Party"
CssClass="ChkBoxStyle" Font-Size="Small" /> </td>
<td class="style7">
<asp:DropDownList ID="ddlParty" runat="server" CssClass="ddl">
</asp:DropDownList> </td>
<td class="style13">
<asp:CheckBox ID="chkBoxContntTyp" runat="server" Font-Bold="True"
Text="Content Type" CssClass="ChkBoxStyle" Font-Size="Small"/> </td>
<td class="style8" rowspan="2">
<asp:RadioButton ID="rdBtnNews" runat="server" Text="News" CssClass="RadioGroup" />
<asp:RadioButton ID="rdBtnTicker" runat="server" Text="Ticker" CssClass="RadioGroup" /> <asp:RadioButton ID="rdBtnBreakingNews"
runat="server" Text="Breaking News" CssClass="RadioGroup" />
</br></br><asp:RadioButton ID="rdBtnBeeper" runat="server" Text="Beeper" CssClass="RadioGroup" /> <asp:RadioButton
ID="rdBtnTalkshow" runat="server" Text="TalkShow" CssClass="RadioGroup" /></td>
</tr>
<tr>
<td class="style6">
<asp:CheckBox ID="chkBoxDate" runat="server" Font-Bold="True" Text="Date"
CssClass="ChkBoxStyle" Font-Size="Small" /> </td>
<td class="style7">
<asp:TextBox ID="tbFrom" runat="server" CssClass="tbDate"></asp:TextBox><asp:Label ID="Label5"
runat="server" Text="To"></asp:Label><asp:TextBox ID="tbTo"
runat="server" CssClass="tbDate"></asp:TextBox> </td>
<td class="style6">
<asp:CheckBox ID="chkBoxPerson" runat="server" Font-Bold="True" Text="Person"
CssClass="ChkBoxStyle" Font-Size="Small" /> </td>
<td class="style7">
<asp:DropDownList ID="ddlPerson" runat="server" CssClass="ddl">
</asp:DropDownList> </td>
<td class="style13">
</td>
</tr>
<tr>
<td class="style4">
<asp:CheckBox ID="chkBoxProgrm" runat="server" Font-Bold="True"
Text="Program" CssClass="ChkBoxStyle" Font-Size="Small"/> </td>
<td class="style3">
<asp:DropDownList ID="ddlProgram" runat="server" CssClass="ddl">
</asp:DropDownList> </td>
<td class="style5">
<asp:CheckBox ID="chkBoxProvince" runat="server" Font-Bold="True"
Text="Province" CssClass="ChkBoxStyle" Font-Size="Small"/> </td>
<td class="style3">
<asp:DropDownList ID="ddlProvince" runat="server" CssClass="ddl">
</asp:DropDownList> </td>
<td class="style18">
<asp:CheckBox ID="chkContentTone" runat="server" Font-Bold="True"
Text="Content Tone" CssClass="ChkBoxStyle" Font-Size="Small"/> </td>
<td class="style9">
<asp:RadioButton ID="rdBtnPositive" runat="server" Text="Positive" CssClass="RadioGroup" /> <asp:RadioButton
ID="rdBtnNegative" runat="server" Text="Negative" CssClass="RadioGroup" /> <asp:RadioButton ID="rdBtnNeutral"
runat="server" Text="Neutral" CssClass="RadioGroup" /> </td>
</tr>
<tr>
<td class="style14">
<asp:Label ID="Label4" runat="server" Text="Keyword" Font-Names="Verdana,Arial"
Font-Bold="True" Font-Size="Small"></asp:Label> </td>
<td class="style15">
<asp:TextBox ID="tbKeyword" runat="server" CssClass="tb"></asp:TextBox> </td>
<td class="style14">
<asp:CheckBox ID="chkBoxCity" runat="server" Font-Bold="True" Text="City"
CssClass="ChkBoxStyle" Font-Size="Small"/> </td>
<td class="style15">
<asp:DropDownList ID="ddlCity" runat="server" CssClass="ddl">
</asp:DropDownList> </td>
<td class="style16">
</td>
<td class="style17">
<asp:Button ID="Button1" runat="server" Text="Search" CssClass="button" />
<asp:Button ID="Button2"
runat="server" Text="Report" CssClass="button" /></td>
</tr>
</table>
如图所示。
但是我想禁用页面加载上的all dropdownlist和单选按钮,当我选中复选框时,只启用相关的dropdownlist或group of checkd复选框。这样地。
当我选中复选框(内容类型)时,一组单选按钮变成如下启用。
我希望当我选中任何复选框时,相关的下拉列表或单选按钮组变为启用。
所有这些都是我想要的客户端(服务器端是我已经知道的糟糕做法)java脚本。
任何想法,因为我从过去2天搜索,没有找到任何结果 以下是标记:
<asp:CheckBox ID="CheckBox1" CssClass="toggleCheckBox" runat="server"
data-associatedTo="<%# TextBox1.ClientID %>" />
<asp:TextBox ID="TextBox1" runat="server" />
<br />
<asp:CheckBox ID="CheckBox2" CssClass="toggleCheckBox" runat="server"
data-associatedTo="radioButtionsPanel1" />
<div id="radioButtionsPanel1">
<asp:RadioButtonList ID="RadioButtonList1" runat="server">
<asp:ListItem Text="First" />
<asp:ListItem Text="Second" />
<asp:ListItem Text="Third" />
</asp:RadioButtonList>
</div>
<br />
<asp:CheckBox ID="CheckBox3" CssClass="toggleCheckBox" runat="server"
data-associatedTo="<%# DropDownList1.ClientID %>" />
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem Text="First" />
<asp:ListItem Text="Second" />
<asp:ListItem Text="Third" />
</asp:DropDownList>
别泄气。我刚才问:)没关系。由于纯JavaScript复杂性的增长,我将等待您准备好使用jQuery。实际上,这个问题可以在jQuery中用大约7行代码实现,但我太懒了,无法将其转换为纯JavaScription。你能帮我了解一下这个pepose的jQuery吗?我在javascript中禁用了all by window onload函数。我不想通过选中复选框来启用dropdownlist和group单选按钮。我该怎么做?我想在单行中水平显示ist、第二和第三个列表项,在下面的roz中显示第四和第五个列表项,如上图所示?我该怎么做?
<script type="text/javascript">
$(function () {
$(".toggleCheckBox[data-associatedTo]").each(function () {
enabeDisableAssociatedControl(this); // disable associated controls
$(this).on("click", function () {
enabeDisableAssociatedControl(this); });
});
});
function enabeDisableAssociatedControl(checkBox) {
var targetControl = $("#" + $(checkBox).attr("data-associatedTo"));
if (targetControl) {
var checked = $(":checkbox", checkBox).is(":checked");
targetControl.find("*").andSelf().each(function () { this.disabled = !checked; });
}
}
</script>