如果在ASP.Net中的GridView ItemTemplate中選中一個複選框，則禁用其他複選框。

Question

我在使用項目模板創建的網格視圖中有兩個複選框。 我想禁用其他複選框，如果在網格視圖中選擇一個。

GridView的代碼： -

<asp:TemplateField HeaderText="Approved"> 
     <ItemTemplate> 
      <asp:CheckBox ID="chkApprove" Text="Approved" runat="server" /> 
     </ItemTemplate> 
</asp:TemplateField> 
<asp:TemplateField HeaderText="Rejected"> 
     <ItemTemplate> 
      <asp:CheckBox ID="chkRejected" Text="Rejected" runat="server" /> 
     </ItemTemplate> 
</asp:TemplateField> 

Javascript代碼： -

function CheckBox_Clicked(chk) { 
     var grid = chk.parentNode.parentNode.parentNode; 
     var chks = grid.getElementsByTagName("input"); 
     for (var i = 0; i < chks.length; i++) { 
     if (chks[i].type == "checkbox" && chks[i] != chk) { 
      chks[i].disabled = chk.checked; 
     } 
     } 
    } 

Answer 1

您可以輕鬆地jQuery這樣做： -

$(document).ready(function() { 
    $('input[id*="chkApprove"]').change(function() { 
     var currentRow = $(this).parents('tr')[0]; 
     $('input[id*="chkRejected"]', currentRow).attr('disabled', this.checked); 
    }); 

    $('input[id*="chkRejected"]').change(function() { 
     var currentRow = $(this).parents('tr')[0]; 
     $('input[id*="chkApprove"]', currentRow).attr('disabled', this.checked); 
    }); 
}); 

代碼說明： -

我正在使用jquery Ends with屬性選擇器來獲取chkRejected複選框，因爲它的ID將呈現爲GridView1_chkApprove_0並註冊更改事件。在這裏面，我找到了包含行（因爲gridview呈現爲HTML表格），最後選擇其他複選框（存在於同一行內）並禁用它。