2011-09-20 2 views
1

GridView에 여러 개의 템플릿 필드가 있습니다. 하나의 CheckBox에 "chkSelect"라는 템플릿이 있고 다른 Template Field에 "lnkgvQCAttribute"라는 하나의 LinkButton이 있습니다. CheckBox가 선택되어 있지 않으면 LinkButton을 비활성화하고 CheckBox를 선택하면 LinkButton을 활성화합니다. JavaScript를 사용하여이를 수행하는 방법?동일한 GridView의 CheckBox가 선택되었을 때 GridView에서 LinkButton을 사용하거나 사용하지 않도록 설정하는 방법은 무엇입니까?

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

내가 필요로하는 모든 제안 ...

답변

2

먼저 jQuery를 (을 위해, 다운로드 및 사이트 폴더 중 하나에 넣어에 대한 참조를 추가하십시오 : 여기

내의 GridView의 열입니다 예를 스크립트) :

<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입니다. 당신은 lnkgvQCAttribute 클래스가 a 요소를 찾아 tr에서 tr로 이동을 제어해야합니다 :

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

을 즐기십시오! 페이지에 자바 스크립트와 스타일을 다음 체크 박스에

+0

는 너무 자바드 감사합니다. JQuery Now에 대한 몇 가지 아이디어가 있습니다. 나는 너의 대답을 너무 upvoted .... – thevan

+0

전혀. 감사합니다 –

1

전화 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; 
} 
+0

고맙습니다. 나는 당신의 대답을 upvoted ... – thevan

+0

감사합니다 thevan .. 일반 자바 스크립트에 대해 물어 생각 .. 그렇지 않으면 jQuery .. 작성했습니다 :) :) –

+0

ASP.NET에서 우리는'onclick = "disableLinkButton (this)"' 왜냐하면 'input'을 보유하는'span' (기본적으로)으로 렌더링 될 것이고'click '은'input'이 아닌'span'에 첨부 될 것이기 때문입니다. –

1

추가 :

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

감사합니다. 나는 너에게서 새로운 것을 배웠다. 나는 너의 대답을 upvoted ... – thevan

관련 문제