Question

我有一个gridview，其中显示每行的复选框。单击复选框后，备用名称标签应更改为文本框，其中的内容保持不变。

如果用户取消选中该复选框，则文本框应再次恢复为标签。

如何在Jquery中实现这一目标。

代码背后的代码如下：

<asp:GridView ID="GridView1" runat="server" OnRowUpdating="GridView1_RowUpdating" AutoGenerateColumns="False">
            <Columns>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:CheckBox ID="checkbox1" runat="server" OnClick="checkboxing()" />
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:CheckBox ID="checkbox1" runat="server" />
                    </EditItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="City Name Id">
                    <ItemTemplate>
                        <asp:Label ID="NameId" runat="server" Text='<%# Eval("Name_Id") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Name">
                    <ItemTemplate>
                        <asp:Label ID="CityName" runat="server" Text='<%# Eval("name") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Geo Name">
                    <ItemTemplate>
                        <asp:Label ID="GeoName" runat="server" Text='<%# Eval("geoname") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Ascii Name">
                    <ItemTemplate>
                        <asp:Label ID="AsciiName" runat="server" Text='<%# Eval("asciiname") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Alternate Names" SortExpression="AlternateNames">
                    <EditItemTemplate>
                        <asp:Label ID="AlternateNames" runat="server" Text='<%# Eval("alternateNames") %>'>
                        </asp:Label>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="AlternateNames" runat="server" Text='<%# Eval("alternateNames") %>'>
                        </asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Longitude">
                    <ItemTemplate>
                        <asp:Label ID="Longitude" runat="server" Text='<%# Eval("longitude") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Latitude">
                    <ItemTemplate>
                        <asp:Label ID="Latitude" runat="server" Text='<%# Eval("latitude") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

在选中/取消选中复选框时执行的Javascript如下：

＆＃13;

 function checkboxing() {
            alert("im here in checkboxing");
            $("input:checkbox").click(function () {
                if ($(this).is(":checked")) {
                    alert("This is so true ");
                }
                else {
                    alert("false");
                }
            });
        }

＆＃13;

现在我的意图是

更改备用名称 - 标签到文本框，其中的内容保留原样供用户编辑，
如果用户稍后取消选中该复选框，则内容应恢复为文本框，再次更改为标签。

如何使用JQuery实现这一目标

Answer 1

有两种方法可以实现它

1在每个复选框点击上动态创建元素 2创建标签和文本框，但在复选框事件

的基础上隐藏它们

因为你使用强类型视图，所以第二个应该是更好的选择

如果你使用客户端输入元素，你可以根据点击功能动态追加元素。

现在我建议使用第二种方法而不是第一种方法，因为第二种方法将操纵dom，在你的情况下这不是必需的，因为第二种选择只会为你的元素添加一个隐藏的类，而不是复杂的在性能方面也更好

Answer 2

名称应为input而不是label，请使用class每个行项而不是id。

建议：从input:checked找到parent row并找到name

Demo

Answer 3

您可以将DOM从标签更改为输入字段

切换复选框后，您可以启用/禁用。

您还可以将自定义样式设置为已禁用的输入字段，就像它的标签一样。

希望这个想法有任何帮助

Answer 4

尝试下面。我假设您正在尝试编辑最后一行，并且每行只有一个复选框。

$(document).ready(function () {
        $("table input[type=checkbox]").on("change", function (event) {                
            var obj = $(event.target);
            var tr = $(obj).closest("tr");
            var td = $(tr).find("td:last");                
            if ($(obj).is(":checked")) {
                var data = $(td).find("span").html();
                $(td).html("<input id=none value=" + data + " />");

            }
            else {
                var data = $(td).find("input").val();
                $(td).html("<span >"+data+"</span>" );
            }

        });
    });

Answer 5

尝试以下代码

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

<script type="text/javascript">
    function toggleControl(chk)
    {
        var cell = $(chk).parent();
        var lbl = $(cell).siblings().find('#lblNames');
        var txtbx = $(cell).siblings().find('#txtNames');
        var str;

        if($(chk).is(':checked'))
        {
            str = $(lbl).text();
            $(lbl).hide();
            $(txtbx).val(str);
            $(txtbx).show();
        }
        else {
            $(lbl).show();
            $(txtbx).hide();
        }
    }
</script>

<asp:GridView ID="GridView1" AutoGenerateColumns="false" runat="server">
    <Columns>
        <asp:TemplateField>
                <ItemTemplate>
                    <asp:CheckBox ID="checkbox1" runat="server" OnClick="toggleControl(this)" />
                </ItemTemplate>                   
            </asp:TemplateField>

        <asp:TemplateField  HeaderText="Alternate Names"> 
            <ItemTemplate>
               <asp:Label ID="lblNames"  ClientIDMode="Static" runat="server" Text='Hello World!'>
               </asp:Label>
               <input type="text" id="txtNames" style="display:none;" />                   
            </ItemTemplate>
 </asp:TemplateField>
    </Columns>
</asp:GridView>

Default.aspx.cs file codes:

    namespace aspnetWeb
    {
    public partial class _Default : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            List<Student> list = new List<Student>();

            for(int i=1;i<=10;i++)
            list.Add(new Student { ID = 1, Count = 20 });

            GridView1.DataSource = list.AsQueryable();
            GridView1.DataBind();
        }
    }

    public class Student
    {
        public int ID { get; set; }

        public int Count { get; set; }
    }
   }

如何在复选框单击使用JQuery时将标签更改为gridview中的文本框

5 个答案: