0

ドロップダウンリストに関連するチェックボックスのリストと、ラジオボタンのグループに関連するチェックボックスがあります。コードサンプルはこれです：

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

このように表示されます。 ここに画像の説明を入力

しかし、ページの読み込み時にすべてのドロップダウンリストとラジオボタンを無効にし、チェックボックスをオンにしたときに、関連するドロップダウンリストまたはチェックボックスのグループのみを有効にします。このような。 ここに画像の説明を入力 チェックボックス(コンテンツタイプ)にチェックを入れると、このようにラジオボタン群が有効になります。 ここに画像の説明を入力 チェックボックスをオンにすると、関連するドロップダウンリストまたはラジオボタンのグループが有効になります。これはすべてクライアント側で必要です（サーバー側は私がすでに知っている悪い習慣です）Javaスクリプト。過去2日間から検索していて、結果が見つからないので、アイデアはありません!

4

1 に答える 1

0

マークアップは次のとおりです。

<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データバインディング式を使用して属性値を設定しました。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>
于 2012-10-19T11:07:24.233 に答える