فعال و غیر فعال کردن TextBox ها در گرید ویو با استفاده از CheckBox

در این مقاله قصد داریم با استفاده از CheckBox موجود در کنار هر خط TextBox های همان خط را فعال و یا غیر فعال کنیم

فعال و غیر فعال کردن TextBox ها در گرید ویو با استفاده از CheckBox

آکادمی برنامه نویسان ، برگزار کننده دوره های آموزش برنامه نویسی با استفاده از اساتید مجرب و حرفه ای در سراسر ایران .

[ جهت مشاهده دوره های درحال ثبت نام کلیک کنید ]

ارائه مدارک معتبر آموزشی و ورود به بازار کار .

سلام دوستان خوبم

ابتدا در یک صفحه یک گرید ویو قرار میدیم که ستون نام و نام خانوادگی حاوی TextBox مربوط به مقدار خودش هست

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
<Columns>
    <asp:TemplateField>
        <HeaderTemplate>
            <asp:CheckBox ID="chkHeader" runat="server" />
        </HeaderTemplate>
        <ItemTemplate>
            <asp:CheckBox ID="chkRow" runat="server" />
        </ItemTemplate>
    </asp:TemplateField>
    <asp:TemplateField HeaderText="نام">
        <ItemTemplate>
            <asp:TextBox ID="txtName" runat="server" Text='<% # Eval("Name") %>' Enabled="false"></asp:TextBox>
        </ItemTemplate>
    </asp:TemplateField>
    <asp:TemplateField HeaderText="نام خانوادگی">
        <ItemTemplate>
            <asp:TextBox ID="txtCity" runat="server" Text='<% # Eval("Family") %>' Enabled="false"></asp:TextBox>
        </ItemTemplate>
    </asp:TemplateField>
</Columns>
</asp:GridView>

 

سپس با استفاده از یک DataTable و در رویداد لود صفحه گرید را پر میکنیم

         if (!this.IsPostBack)
            {
                DataTable dt = new DataTable();
                dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id"), new DataColumn("Name"), new DataColumn("Family") });
                dt.Rows.Add(1, "ایمان", "مدائنی");
                dt.Rows.Add(2, "پرهام", "مدائنی");
                dt.Rows.Add(3, "علی", "محمدی");
                dt.Rows.Add(4, "سارا", "احمدی");
                GridView1.DataSource = dt;
                GridView1.DataBind();
            }

سپس با استفاده از دستورات JavaScript زیر مقادیر و فعال یا غیر فعال بودن TextBox هارو انجام میدیم


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
    //Enable Disable all TextBoxes when Header Row CheckBox is checked.
    $("[id*=chkHeader]").bind("click", function () {
        var chkHeader = $(this);
 
        //Find and reference the GridView.
        var grid = $(this).closest("table");
 
        //Loop through the CheckBoxes in each Row.
        $("td", grid).find("input[type=checkbox]").each(function () {
 
            //If Header CheckBox is checked.
            //Then check all CheckBoxes and enable the TextBoxes.
            if (chkHeader.is(":checked")) {
                $(this).attr("checked", "checked");
                var td = $("td", $(this).closest("tr"));
                td.css({ "background-color": "#D8EBF2" });
                $("input[type=text]", td).removeAttr("disabled");
            } else {
                $(this).removeAttr("checked");
                var td = $("td", $(this).closest("tr"));
                td.css({ "background-color": "#FFF" });
                $("input[type=text]", td).attr("disabled", "disabled");
            }
        });
    });
 
    //Enable Disable TextBoxes in a Row when the Row CheckBox is checked.
    $("[id*=chkRow]").bind("click", function () {
 
        //Find and reference the GridView.
        var grid = $(this).closest("table");
 
        //Find and reference the Header CheckBox.
        var chkHeader = $("[id*=chkHeader]", grid);
 
        //If the CheckBox is Checked then enable the TextBoxes in thr Row.
        if (!$(this).is(":checked")) {
            var td = $("td", $(this).closest("tr"));
            td.css({ "background-color": "#FFF" });
            $("input[type=text]", td).attr("disabled", "disabled");
        } else {
            var td = $("td", $(this).closest("tr"));
            td.css({ "background-color": "#D8EBF2" });
            $("input[type=text]", td).removeAttr("disabled");
        }
 
        //Enable Header Row CheckBox if all the Row CheckBoxes are checked and vice versa.
        if ($("[id*=chkRow]", grid).length == $("[id*=chkRow]:checked", grid).length) {
            chkHeader.attr("checked", "checked");
        } else {
            chkHeader.removeAttr("checked");
        }
    });
});
</script>

 

نمونه هم ضمیمه شد

فایل های ضمیمه