使用JavaScript在同一GridView中启用或禁用复选框更改事件上的文本框

Question

我在网页上有一个GridView。在这个gridview中，我有一个Textbox和一个CheckBox。 如果选中了CheckBox，则应启用TextBox；如果未选中，则应使用纯JavaScript禁用TextBox。

请帮我解决这个问题。 提前致谢。

<asp:GridView ID="grdBasicApproval" runat="server" AutoGenerateColumns="false" Width="90%"
                    CssClass="mGrid" DataKeyNames="EmpId">
                    <Columns>
                        <asp:TemplateField Visible="true" HeaderText="Remark">
                            <ItemTemplate>
                                <asp:TextBox ID="txtRemark" runat="server" Width="125px" TextMode="MultiLine" Style="resize: none"></asp:TextBox>
                            </ItemTemplate>
                            <ItemStyle HorizontalAlign="Center" />
                        </asp:TemplateField>
                        <asp:TemplateField ItemStyle-HorizontalAlign="Center" ItemStyle-Width="7%">
                            <HeaderTemplate>
                                <asp:CheckBox ID="chkHeader" runat="server" Text="All" onclick="CheckAll(this);"
                                    TextAlign="Left" />
                            </HeaderTemplate>
                            <ItemTemplate>
                                <asp:CheckBox ID="chkChild" runat="server" onclick="return Check_Click(this);" />
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>

我的JavaScript如下：

$(document).ready(function () {
        try {
                            $("input[type=checkbox][id*=chkChild]").click(function () {
                if (this.checked) {
                    alert("Checked");
                    $(this).closest("tr", "").find("input[type=TextBox][id*=txtRemark]").attr("disabled", true);
                                        }
                else {
                    alert("UnChecked");
                    $(this).closest("tr", "").find("input[type=TextBox][id*=txtRemark]").attr("disabled", true);

                }
            });
        } catch (e) {
            alert(e);
        }
    });

Answer 1

您可以将事件与RowDataBound中的复选框绑定，然后将文本框传递给javascript函数。 在javascript函数中，您可以启用禁用文本框。

后面的代码

void CustomersGridView_RowDataBound(Object sender, GridViewRowEventArgs e)
{    
    if(e.Row.RowType == DataControlRowType.DataRow)
    {
        CheckBox chkBox = (CheckBox)e.Row.FindControl("checkBoxId");
        TextBox textBox = (TextBox )e.Row.FindControl("textBoxId");
        chkBox.Attribute.Add("onclick", "EnableDisable(this, '" + textBox.ClientID + "');" );
    }    
}

使用Javascript

function EnableDisable(chkbox, textBoxId)
{
   document.getElementById(textBoxId).disabled = !chkbox.checked;  
}

Answer 2

尝试喜欢

HTML

   <asp:CheckBox ID="CheckBox" runat="server" />

使用Javascript

$(document).ready(function() {
     $("input[type=text][id*=TextboxId]").attr("disabled", true);
     $("input[type=checkbox][id*=CheckBox]").click(function() {
     if (this.checked)
     $(this).closest("tr").find("input[type=text][id*=TextboxId]").attr("disabled", false);
     else
     $(this).closest("tr").find("input[type=text][id*=TextboxId]").attr("disabled", true);
     });
});

Answer 3

您可以使用此代码检查该复选框并禁用/启用相对于它的文本框

<asp:TextBox runat="server" ID="txt_Text1"></asp:TextBox>
<asp:CheckBox runat="server" ID="chk_Check" onclick="ChangeText();" />
 <script>
    function ChangeText() {
        var chkb = document.getElementById('<%= chk_Check.ClientID %>');
        if(chkb.checked)
           document.getElementById('<%= txt_Text1.ClientID %>').disabled = true;
        else
           document.getElementById('<%= txt_Text1.ClientID %>').disabled = false;
    }
 </script>