如何使用JavaScript在GridView中启用和禁用复选框

How to enable and disable CheckBox in the GridView using JavaScript?

本文关键字：复选框 启用 何使用 JavaScript GridView      更新时间：2023-09-26

我有一个GridView "gvpodetails"。我有两个复选框，一个在GridView的第一列，另一个在GridView的最后一列。

我想在第一个复选框被选中时启用第二个复选框。当第一个复选框未选中时，我想禁用第二个复选框。

我写了下面的JavaScript。

    var grid = document.getElementById('<%=gvPODetails.ClientID %>');        
    var PlannedQty = 0*1;        
    if(grid != null)
    {
        var Inputs = grid.getElementsByTagName('input');
        for(i = 0;i < Inputs.length;i++)
        {
            var id=String(Inputs[i].id);
            if(Inputs[i].type == 'text' && id.indexOf("txtPlannedQuantity")!=-1)
            {
                if(Inputs[i-2].type == 'checkbox')
                {
                    if(Inputs[i-2].checked)
                    {
                        if(Inputs[i+2].value == "0.000")
                            Inputs[i+2].value = (parseFloat(Inputs[i].value) - parseFloat(Inputs[i+1].value))
                        else
                            Inputs[i+2].value = Inputs[i+2].value;
                        Inputs[i+2].disabled = false;
                        Inputs[i+3].disabled = false;
                        Inputs[i-1].disabled = false;
                        Inputs[i+6].disabled = false;// This is for Second CheckBox
                    }
                    else
                    {
                        Inputs[i+4].value="0.00";
                        Inputs[i+5].value="0.00";
                        Inputs[0].checked = false;
                        Inputs[i+2].disabled = true;
                        Inputs[i+3].disabled = true;
                        Inputs[i-1].disabled = true;
                        Inputs[i+6].disabled = true;// This is for Second CheckBox
                    }
                }
            }
        }             
    }
   <Columns>                         
     <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>
     </asp:TemplateField>
     <asp:TemplateField HeaderText="ED_f">
         <ItemTemplate>
             <asp:CheckBox ID="chkEDInclusive" runat="server" Checked = '<%#Bind("EDInclusive_f") %>' Enabled="false" />
         </ItemTemplate>
     </asp:TemplateField>
  </Columns>

这些是我的javascript和GridView源代码。我也有一些文本框在模板字段列。此条件适用于GridView中的所有文本框。但是文本框是正确启用和禁用的，除了最后一个CheckBox。我只给出了两个复选框的源代码。如何启用和禁用GridView中的最后一个复选框时，第一个复选框被选中和未选中?我需要你所有的建议。

您可能应该使用事件委托。在网格上做这个

此javascript假设您的行标签名称为'tr'，并且在选择该特定行的所有输入时，您的第二个复选框为input[1]。如果你需要IE支持，你需要使用你最喜欢的事件处理包装器。

window.onload = function () {
    var rowNodeName = 'tr',
        firstInputClassName = 'foo';
    document.getElementById('<%=gvPODetails.ClientID %>').addEventListener('change', function (e) {
        if (e.target.type === 'checkbox' && e.target.className.match(firstInputClassName)) {
            // Find parent row
            var row = e.target.parentNode;
            while (row.nodeName !== rowNodeName.toUpperCase()) {
                row = row.parentNode;
                if (!row) {
                    break; // In case we hit document
                }
            }
            if (row) {
                var inputs = row.getElementsByTagName('input');
                inputs[1].disabled = !e.target.checked;
            }
        }
    }, false);
}

这将处理在firstputclassname变量中定义的className为'foo'的网格中任何输入的更改事件。当被触发时，将沿着dom树走到标记名等于rowNodeName的节点，选择该行中的输入，并将该行中第二个输入的禁用状态设置为触发事件的输入的选中状态的反面。

相关文章：