1

チェックボックスとテキストボックスがあります。ユーザーが次に使用しようとしたチェックボックスをオンにした後、非表示になっているCssClassを削除しようとしていますが、機能しませんでした。

HTML

    <ul id="sortable">
<asp:Repeater runat="server" ID="rep_sortable">
    <ItemTemplate>

   <li class="ui-state-default">
       <span class="ui-icon ui-icon-arrowthick-2-n-s"></span><%# DataBinder.Eval(Container.DataItem, "Body") %>  
       <asp:CheckBox ID="chb_com"  runat="server" AutoPostBack="false" Checked='<%# DataBinder.Eval(Container.DataItem, "Completed")  %>' oncheckedchanged="CheckBox1_CheckedChanged"/>
       <asp:HiddenField ID="hf_reminderID" runat="server" Value='<%# DataBinder.Eval(Container.DataItem, "ReminderID")  %>'/>
       <asp:TextBox runat="server" ID="txtb_whyclosed" CssClass="hidden"></asp:TextBox>
   </li>
    </ItemTemplate>
</asp:Repeater>
</ul>

Jquery

$("input[type=checkbox]").on("click", function () {
    console.log("vbvsdvs");
    $("input[type=checkbox]").next("input:text").removeClass("hidden");
4

4 に答える 4

0

以下のコードを試してください：

$("input[type='checkbox']").on("click", function () {
    $("#txtb_whyclosed").removeClass("hidden");
})

また

$("input[type='checkbox']").click(function () {
    $("#txtb_whyclosed").removeClass("hidden");
});
于 2013-02-28T16:15:03.900 に答える
0

jQuery next関数は、次の要素のみを選択します。セレクターに一致する次の要素が見つかりません。（セレクターは単なるフィルターです）

コードを機能させるには、チェックボックスをテキストボックスのすぐ横に移動して、次のコードが見つかるようにします。

<li class="ui-state-default">
   <span class="ui-icon ui-icon-arrowthick-2-n-s"></span><%# DataBinder.Eval(Container.DataItem, "Body") %>         
   <asp:HiddenField ID="hf_reminderID" runat="server" Value='<%# DataBinder.Eval(Container.DataItem, "ReminderID")  %>'/>
   <asp:CheckBox ID="chb_com"  runat="server" AutoPostBack="false" Checked='<%# DataBinder.Eval(Container.DataItem, "Completed")  %>' oncheckedchanged="CheckBox1_CheckedChanged"/>
   <asp:TextBox runat="server" ID="txtb_whyclosed" CssClass="hidden"></asp:TextBox>
</li>

または、nextAllを使用して、現在の要素の後にあるすべての兄弟要素を検索します。

$("input[type=checkbox]").on("click", function () {
    console.log("vbvsdvs");
    $(this).nextAll("input:text").removeClass("hidden");

クリックコールバック内でも使用する必要があることに注意してください。$(this)そうしないと、チェックボックスの後にあるすべてのテキストボックスに影響します。

于 2013-02-28T16:16:24.370 に答える
0

ここではリピーターを使用しているため、チェックボックスとテキストボックスにクラス名を付けて、他の入力を識別して区別する必要があります。

HTML： 

   <li class="ui-state-default">
       <span class="ui-icon ui-icon-arrowthick-2-n-s"></span><%# DataBinder.Eval(Container.DataItem, "Body") %>  
       <asp:CheckBox CssClass="checkbox" ID="chb_com"  runat="server" AutoPostBack="false" Checked='<%# DataBinder.Eval(Container.DataItem, "Completed")  %>' oncheckedchanged="CheckBox1_CheckedChanged"/>
       <asp:HiddenField ID="hf_reminderID" runat="server" Value='<%# DataBinder.Eval(Container.DataItem, "ReminderID")  %>'/>
       <asp:TextBox runat="server" ID="txtb_whyclosed" CssClass="hidden text"></asp:TextBox>
   </li>
    </ItemTemplate>
</asp:Repeater>

JS：

$("input.checkbox").on("click", function () {
    if($(this).is(":checked"))
         $(this).next(".text").removeClass("hidden");
    else
         $(this).next(".text").addClass("hidden");
})
于 2013-02-28T16:20:21.620 に答える
0

私はこのようなもので行きます。

$('input[type=checkbox]').change(function() {
    var txtBox = $(this).nextAll('input:text');
    if ($(this).is(':checked')) {
        txtBox.removeClass('hidden');
    } else {
        txtBox.addClass('hidden');
    }
});
于 2013-02-28T16:33:43.747 に答える