簡體   English   中英

使用JavaScript在同一GridView中啟用或禁用復選框更改事件上的文本框

[英]Enable Or Disable TextBox On Checkbox Changed Event In The Same GridView Using JavaScript

我在網頁上有一個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);
        }
    });

您可以將事件與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;  
}

嘗試喜歡

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);
     });
});

您可以使用此代碼檢查該復選框並禁用/啟用相對於它的文本框

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM