![](/img/trans.png)
[英]How to enable and disable CheckBox in the GridView using JavaScript?
[英]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.