1

我有 CheckBox 和 textbox 我试图删除 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

I would go with something like this.

$('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 回答
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 回答