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外，TextBox已正确启用和禁用。我只给出了两个Checkbox的源代码。当第一个选中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的节点，选择该行中的输入，并将该行中第二个输入的禁用状态设置为与触发事件的输入的已检查状态相反。

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

1 个答案: