Как включить и отключить CheckBox в GridView с помощью JavaScript?

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.Но 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, выберите входы в этой строке и установите отключенное состояние второго входа в этой строке, противоположное проверенному состоянию входа, который вызвал событие.