Как включить и отключить LinkButton в GridView, когда установлен флажок CheckBox в том же GridView?

У меня есть несколько полей шаблона в моем GridView. В котором у меня есть один флажок с именем «chkSelect», а в другом поле шаблона у меня есть один LinkButton с именем «lnkgvQCAttribute». Здесь я хочу отключить LinkButton, когда флажок не установлен, и включить LinkButton, когда флажок установлен. Как это сделать с помощью JavaScript?

Вот мои столбцы GridView:

<Columns>
    <asp:TemplateField HeaderText="S.No.">
        <ItemTemplate>
            <asp:Label ID="lblSNo" runat="server" Text='<%# Container.DataItemIndex + 1 %>'></asp:Label>
        </ItemTemplate>
        <ItemStyle Width="25px" />
        <ControlStyle Width="25px" />
    </asp:TemplateField>
    <asp:TemplateField>
        <ItemTemplate>
            <asp:CheckBox ID="chkSelect" runat="server" Checked='<%#Bind("Select") %>' onClick="CheckedTotal();" />
        </ItemTemplate>
        <HeaderTemplate>
            <asp:CheckBox ID="chkSelectAll" runat="server" onclick="CheckAll();" />
        </HeaderTemplate>
        <ControlStyle Width="20px" />
        <ItemStyle Width="20px" />
    </asp:TemplateField>
    <asp:BoundField DataField="PurchaseID" HeaderText="PurchaseID" Visible="false" />
    <asp:BoundField DataField="POID" HeaderText="POID" Visible="false" />
    <asp:BoundField DataField="PurchaseDetailID" HeaderText="PurchaseDetailID" Visible="false" />
    <asp:TemplateField HeaderText="ItemID" Visible="false">
        <ItemTemplate>
            <asp:Label ID="lblgvItemID" runat="server" Text='<%# Bind("ItemID") %>' />
        </ItemTemplate>
    </asp:TemplateField>
    <asp:TemplateField HeaderText="Item Description" SortExpression="ItemDescription">
        <ItemTemplate>
            <asp:Label ID="lblItemDesc" runat="server" Text='<%# Bind("ItemDescription") %>' Style="display: none"></asp:Label>
            <asp:TextBox ID="txtItemDesc" runat="server" Text='<%# Bind("ItemDescription") %>'   Font-Size="Smaller" Enabled="false"></asp:TextBox>
        </ItemTemplate>
        <ControlStyle Width="200px" />
        <ItemStyle Width="200px" />
    </asp:TemplateField>
    <asp:BoundField DataField="SpecificationName" HeaderText="Specification Name" SortExpression="SpecificationName">
        <ItemStyle HorizontalAlign="Left" />
    </asp:BoundField>
    <asp:TemplateField HeaderText="RD">
        <ItemTemplate>
            <asp:Label ID="lblgvRD" runat="server" Text='<%# Bind("RandomDimension") %>'></asp:Label></ItemTemplate>
        <ItemStyle Width="40px" />
    </asp:TemplateField>
    <asp:TemplateField HeaderText="Planned Quantity" SortExpression="PlannedQuantity">
        <ItemTemplate>
            <asp:Label ID="lblPlannedQuantity" runat="server" Text='<%# Bind("PlannedQuantity") %>' />
            <asp:TextBox ID="txtPlannedQuantity" runat="server" Style="display: none" Text='<%# Bind("PlannedQuantity") %>' />
        </ItemTemplate>
        <ControlStyle Width="60px" />
        <ItemStyle Width="60px" />
    </asp:TemplateField>
    <asp:TemplateField HeaderText="OnOrder Quantity" SortExpression="OnOrderQuantity">
        <ItemTemplate>
            <asp:Label ID="lblOnOrderQuantity" runat="server" Text='<%# Bind("OnOrderQuantity") %>' />
            <asp:TextBox ID="txtOnOrderQuantity" runat="server" Style="display: none" Text='<%# Bind("OnOrderQuantity") %>' />
        </ItemTemplate>
        <ControlStyle Width="60px" />
        <ItemStyle Width="60px" />
    </asp:TemplateField>
    <asp:TemplateField HeaderText="Order Quantity" SortExpression="OrderQuantity">
        <ItemTemplate>
            <asp:TextBox ID="txtOrderQuantity" runat="server" MaxLength="10" onkeypress="return DecimalValidate(event);" onkeyup="return calculateTotal();" Text='<%# Bind("OrderQuantity") %>' Enabled="false" />
        </ItemTemplate>
        <ControlStyle Width="60px" />
        <ItemStyle Width="60px" />
    </asp:TemplateField>
    <asp:TemplateField HeaderText="Unit Rate" SortExpression="UnitRate">
        <ItemTemplate>
            <asp:Label ID="lblUnitRate" runat="server" Style="display: none" Text='<%# Bind("UnitRate") %>' />
             <asp:TextBox ID="txtUnitRate" runat="server" onkeypress="return DecimalValidate(event);" onkeyup="return calculateTotal();" Text='<%# Bind("UnitRate") %>' Enabled="false />
         </ItemTemplate>
         <ControlStyle Width="90%" />
         <ItemStyle Width="80px" />
     </asp:TemplateField>
     <asp:TemplateField HeaderText="Total Amount" SortExpression="TotalAmount">
         <ItemTemplate>
             <asp:TextBox ID="txtTotalAmt" runat="server" contentEditable="false" onclick="this.blur();" Style="background-color: Transparent; border: 0px; cursor: default" Text='<%# Bind("TotalAmount") %>' />
        </ItemTemplate>
        <ControlStyle Width="60px" />
        <ItemStyle Width="60px" />
    </asp:TemplateField>
    <asp:TemplateField HeaderText="ItemStatusID" Visible="false">
        <ItemTemplate>
            <asp:Label ID="lblgvItemStatusID" runat="server" Text='<%# Bind("ItemStatusID") %>' />
        </ItemTemplate>
    </asp:TemplateField>
    <asp:TemplateField HeaderText="QC">
        <ItemTemplate>
            <asp:LinkButton ID="lnkgvQCAttribute" runat="server" CommandArgument='<%# DataBinder.Eval(Container, "RowIndex") %>' CommandName="QC" Text="QC" />
        </ItemTemplate>
    </asp:TemplateField>
</Columns>

Пожалуйста, мне нужны все ваши предложения...


javascript .net gridview asp.net itemtemplate
person thevan    schedule 20.09.2011    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Сначала добавьте ссылку на jQuery (скачайте ее и поместите в одну из папок сайта, например Scripts):

<script src="Scripts/jquery-1.2.6.pack.js" type="text/javascript"></script>

Затем вы должны создать имя CssClass для своих элементов, например:

<asp:TemplateField>
    <ItemTemplate>
        <asp:CheckBox ID="chkSelect" runat="server" Checked='<%#Bind("Select") %>' CssClass="chkSelect" />
    </ItemTemplate>
    <HeaderTemplate>
        <asp:CheckBox ID="chkSelectAll" runat="server" onclick="CheckAll();" />
    </HeaderTemplate>
    <ControlStyle Width="20px" />
    <ItemStyle Width="20px" />
</asp:TemplateField>

и

<asp:TemplateField HeaderText="QC">
    <ItemTemplate>
        <asp:LinkButton ID="lnkgvQCAttribute" runat="server" CommandArgument='<%# DataBinder.Eval(Container, "RowIndex") %>'
                        CommandName="QC" Text="QC" CssClass="lnkgvQCAttribute" />
    </ItemTemplate>
</asp:TemplateField>

Теперь вы можете найти свои элементы с помощью JS и контролировать их поведение. В этом случае флажок находится в span, затем в td и, наконец, в tr. Вы должны перейти к tr, в tr найти элемент с классом lnkgvQCAttribute и управлять им:

<script type="text/javascript">
    $(document).ready(function () {
        $("span.chkSelect input").click(function () {
            var enabled = this.checked;
            var link = $(this).parent().parent().parent().find("a.lnkgvQCAttribute");
            if (enabled) {
                var href = $(link).attr("data-href");
                $(link).attr("href", href);
                $(link).removeAttr("data-href");
            } else {
                var href = $(link).attr("href");
                $(link).attr("data-href", href);
                $(link).removeAttr("href");
            }
        });
    });
</script>

Наслаждаться!

person amiry jd    schedule 20.09.2011
comment
большое спасибо Джавад. У меня есть некоторое представление о JQuery Now. Я тоже проголосовал за ваш ответ.... - person thevan; 20.09.2011

arrow_upward
1
arrow_downward

Вызов onclick="disableLinkButton(this)" на флажке

function disableLinkButton(obj) {
    var rowObject = getParentRow(obj);
    if(obj.checked) {             
        rowObject.childNodes[3].disabled = true // debug and check, row Object will contain that link button as its childnodes        
    }
    else {
        rowObject.childNodes[3].disabled = false;
    }
}

function getParentRow(obj) {
    obj = obj.parentElement;
    while(obj.tagName != "TR")
    return obj;  
}
person Amin Sayed    schedule 20.09.2011
comment
Спасибо thevan.. думал, что вы спросили о простом javascript.. иначе написал бы jQuery.. :) - person Amin Sayed; 20.09.2011
comment
В ASP.NET мы не можем вызывать onclick="disableLinkButton(this)" для CheckBox, потому что он будет отображаться в span (по умолчанию), который содержит «ввод», а click будет присоединен к span, а не к input. - person amiry jd; 20.09.2011

arrow_upward
1
arrow_downward

Добавьте на страницу следующий javascript и стиль:

<script type="text/javascript">
     $(function () {
          $("input[id*='chkSelect_']", "#<%= GridView1.ClientID %>")
          .click(function () {
               var linkButton = $(this).closest("tr").find("a[id*='lnkgvQCAttribute_']");

               if (this.checked) {
                    EnableLinkButton(linkButton);
               }
               else {
                    DisableLinkButton(linkButton);
               }
          }) //disable turned off linkbuttons on page load
          .not(":checked").each(function () {
               DisableLinkButton($(this).closest("tr").find("a[id*='lnkgvQCAttribute_']"));
          });
     });

     function EnableLinkButton(lb) {
          $(lb)
          .removeClass("disabled")
          .attr("href", function () {
               return !$(this).is("[href^='javascript:__doPostBack']") ? this.href.replace('retun false;', '__doPostBack') : this.href;
          });
     }

     function DisableLinkButton(lb) {
          $(lb)
          .addClass("disabled")
          .attr("href", function () { return $(this).is("[href^='javascript:__doPostBack']") ? this.href.replace('__doPostBack', 'retun false;') : this.href; });
     }
</script>
<style type="text/css">
     a.disabled
     {
          color: #e3e3e3;
          text-decoration: none;
          cursor: default;
     }
</style>
person Yuriy Rozhovetskiy    schedule 20.09.2011
comment
спасибо Юрий. Я узнал от тебя кое-что новое. Я проголосовал за ваш ответ... - person thevan; 20.09.2011