在asp.net中使用Javascript客戶端驗證

Question

我有與放大按鈕相關的dropdownlist和chek框相關的複選框列表。代碼示例是這樣的：

<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" 
        />&nbsp;</td> 
      <td class="style7"> 
       <asp:DropDownList ID="ddlChannel" runat="server" CssClass="ddl"> 
       </asp:DropDownList>&nbsp;</td> 
      <td class="style6"> 
       <asp:CheckBox ID="chkBoxParty" runat="server" Text="Party" 
        CssClass="ChkBoxStyle" Font-Size="Small" />&nbsp;</td> 
      <td class="style7"> 
       <asp:DropDownList ID="ddlParty" runat="server" CssClass="ddl"> 
       </asp:DropDownList>&nbsp;</td> 
      <td class="style13"> 
       <asp:CheckBox ID="chkBoxContntTyp" runat="server" Font-Bold="True" 
        Text="Content Type" CssClass="ChkBoxStyle" Font-Size="Small"/>&nbsp;</td> 

      <td class="style8" rowspan="2"> 
       <asp:RadioButton ID="rdBtnNews" runat="server" Text="News" CssClass="RadioGroup" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
       <asp:RadioButton ID="rdBtnTicker" runat="server" Text="Ticker" CssClass="RadioGroup" />&nbsp;&nbsp;<asp:RadioButton ID="rdBtnBreakingNews" 
          runat="server" Text="Breaking News" CssClass="RadioGroup" /> 
       </br></br><asp:RadioButton ID="rdBtnBeeper" runat="server" Text="Beeper" CssClass="RadioGroup" />&nbsp;&nbsp;<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" />&nbsp;</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>&nbsp;</td> 
      <td class="style6"> 
       <asp:CheckBox ID="chkBoxPerson" runat="server" Font-Bold="True" Text="Person" 
        CssClass="ChkBoxStyle" Font-Size="Small" />&nbsp;</td> 
      <td class="style7"> 
       <asp:DropDownList ID="ddlPerson" runat="server" CssClass="ddl"> 
       </asp:DropDownList>&nbsp;</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"/>&nbsp;</td> 
      <td class="style3"> 
       <asp:DropDownList ID="ddlProgram" runat="server" CssClass="ddl"> 
       </asp:DropDownList>&nbsp;</td> 
      <td class="style5"> 
       <asp:CheckBox ID="chkBoxProvince" runat="server" Font-Bold="True" 
        Text="Province" CssClass="ChkBoxStyle" Font-Size="Small"/>&nbsp;</td> 
      <td class="style3"> 
       <asp:DropDownList ID="ddlProvince" runat="server" CssClass="ddl"> 
       </asp:DropDownList>&nbsp;</td> 
      <td class="style18"> 
       <asp:CheckBox ID="chkContentTone" runat="server" Font-Bold="True" 
        Text="Content Tone" CssClass="ChkBoxStyle" Font-Size="Small"/>&nbsp;</td> 
      <td class="style9"> 
       <asp:RadioButton ID="rdBtnPositive" runat="server" Text="Positive" CssClass="RadioGroup" />&nbsp;&nbsp;<asp:RadioButton 
        ID="rdBtnNegative" runat="server" Text="Negative" CssClass="RadioGroup" />&nbsp;&nbsp;<asp:RadioButton ID="rdBtnNeutral" 
          runat="server" Text="Neutral" CssClass="RadioGroup" />&nbsp;</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>&nbsp;</td> 
      <td class="style15"> 
       <asp:TextBox ID="tbKeyword" runat="server" CssClass="tb"></asp:TextBox>&nbsp;</td> 
      <td class="style14"> 
       <asp:CheckBox ID="chkBoxCity" runat="server" Font-Bold="True" Text="City" 
        CssClass="ChkBoxStyle" Font-Size="Small"/>&nbsp;</td> 
      <td class="style15"> 
       <asp:DropDownList ID="ddlCity" runat="server" CssClass="ddl"> 
       </asp:DropDownList>&nbsp;</td> 
      <td class="style16"> 
       </td> 
      <td class="style17"> 
       <asp:Button ID="Button1" runat="server" Text="Search" CssClass="button" /> 
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<asp:Button ID="Button2" 
        runat="server" Text="Report" CssClass="button" /></td> 
     </tr>  
    </table> 

這就是這樣顯示的。

但我想禁用頁面加載時的所有下拉列表和單選按鈕，當我在複選框上選中時，只啓用相關的dropdownliast或複選框組。喜歡這個。 當我檢查複選框（內容類型）時，單選按鈕組變爲可用。 我想要當我檢查任何複選框，然後相關的下拉列表或一組單選按鈕變爲啓用。 所有我想在客戶端（服務器端是我已經知道的不好的做法）的Java腳本。 任何想法，因爲我從過去2天搜索，沒有找到任何結果！

Answer 1

下面是標記：

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

我不得不使用數據綁定表達式來設置data-associatedTo屬性值。如果您願意，您可以將這些屬性添加到代碼隱藏的chackbox中。在Page_PreRender事件處理程序中。

這裏的javascript：

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