2017-02-27 44 views
0

任何人都可以幫助我進行下面的查詢。驗證所選複選框GridView中的文本框

我有一個由4列組成的gridview。

塔1 - 物品模板是一個複選框檢查行

柱2 - 物品模板是日提交的,以顯示SERIALNUMBER標籤

柱3 - 物品-模板標籤日提交的,以顯示說明

第4列 - 項目模板是允許用戶在網格中輸入數量值的文本框。

當我檢查網格中的一行時,我想驗證此行的相應文本框,它不應該爲空。我發現腳本檢查至少一個複選框應該在網格中檢查,但我想驗證複選框的文本框。

這裏是我的gridview。

<asp:GridView ID="grdtest1" runat="server" CssClass="table table-striped table-hover table-responsive table-condensed" AutoGenerateColumns="False"> 
      <Columns> 
       <asp:TemplateField HeaderText="Select"> 
        <ItemTemplate> 
         <asp:CheckBox ID="chkSelect" runat="server" /> 
        </ItemTemplate> 
       </asp:TemplateField> 
       <asp:TemplateField HeaderText=" slNumber"> 
        <ItemTemplate> 
         <asp:Label runat="server" ID="serialNumber" Text='<%# Eval("SL_NUMBER").ToString()%>'></asp:Label> 
        </ItemTemplate> 
       </asp:TemplateField> 
       <asp:TemplateField HeaderText=" Description"> 
        <ItemTemplate> 
         <%# Eval("Description").ToString()%> 
        </ItemTemplate> 
       </asp:TemplateField> 
       <asp:TemplateField HeaderText="Quantity"> 
        <ItemTemplate> 
         <asp:TextBox ID="txtQuantity" CssClass="form-control input-sm" runat="server"></asp:TextBox> 
        </ItemTemplate> 
       </asp:TemplateField> 
      </Columns> 
     </asp:GridView> 

回答

0

下面是一個代碼片段,它將一個偵聽器添加到GridView1,然後當複選框被選中時,它將驗證同一行中的文本框的值。

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#<%= GridView1.ClientID %> input[type=checkbox]').change(function() { 
      if ($(this).prop('checked') == true) { 
       var txt = $(this).closest('tr').find('input[type=text]'); 
       if (txt.val() == "") { 

        //textbox is empty 
        txt.attr('style', 'background-color:red'); 

       } 
      }  
     }); 
    }); 
</script> 
0

鑑於你的GridView,你可以做到以下幾點:(註釋進行說明)

//On the change of a checkbox within a table-cell 
$("table tbody tr td input[type='checkbox']").on("change", function() { 

    var $t = $(this); 

    //If checkbox is checked 
    if ($t.is(":checked")) { 

     //Get its parent row 
     var $row = $(this).closest("tr"); 

     //Look for a textbox within that row 
     var $textbox = $row.find("input[type='text']").first(); 

     //Check if that textbox empty 
     if (!$textbox.val().trim().length) { 
      //TEXTBOX IS EMPTY 
      alert("Textbox is empty."); 
     } 

    } 

}); 

作爲一個忠告,做JavaScript和ASP的時候,它總是容易與呈現的HTML工作而不是ASP本身,就像JavaScript所看到的一樣。