如何使用 JavaScript 在 GridView 中启用和禁用 CheckBox？

Question

我有一个 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 之外，TextBoxes 被正确启用和禁用。 我只给出了两个复选框的源代码。 当第一个 CheckBox 被选中和未选中时，如何启用和禁用 GridView 中的最后一个复选框？ 我需要你的所有建议..

Answer 1

您可能应该使用事件委托。在网格上执行此操作。

此JavaScript假定您的行标签名称为“ TR”，并且选择该特定行的所有输入时，您的第二个复选框是输入[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);
}

这将处理网格中任何输入上的更改事件，其 className 为“foo”，如 firstInputClassName 变量中所定义。触发时将沿 dom 树向上移动到标记名等于 rowNodeName 的节点，选择该行中的输入并将该行中第二个输入的禁用状态设置为与触发事件的输入的选中状态相反。