Comment activer et désactiver le LinkButton dans GridView lorsque CheckBox dans le même GridView a été cochée?

Question

J'ai un certain nombre de champs de modèle dans mon GridView. Dans lequel j'ai un CheckBox appelé "chkSelect" et dans un autre champ Template j'ai un LinkButton appelé "lnkgvQCAttribute". Ici, je veux désactiver le LinkButton lorsque CheckBox est décoché et Activer le LinkButton lorsque le CheckBox est vérifié. Comment faire cela en utilisant JavaScript?

Voici mes colonnes de 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> 

S'il vous plaît je besoin de toutes vos suggestions ...

Answer 1

d'abord ajouter une référence à jQuery (le télécharger et le mettre dans l'un des dossiers du site, pour exemple Scripts):

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

Ensuite, vous devez créer un CssClass nom pour vos éléments, comme:

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

et

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

Maintenant, vous pouvez trouver vos éléments avec JS et contrôler leur comportement. Dans ce cas, la case à cocher est dans un span, puis dans un td, et enfin un tr. Vous devez naviguer au tr, dans le tr trouver un élément qui ont lnkgvQCAttribute classe, et le contrôler:

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

Enjoy!

Answer 2

Appel onclick="disableLinkButton(this)" sur la case

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

Answer 3

Ajouter suivant javascript et le style sur la page:

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