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

Question

I have a GridView "gvpodetails". In that I have two checkboxes one in the first column of the GridView and another one in the last column of the GridView.

I want to enable the second checkbox when the first checkbox is checked. And I want to disable the second checkbox when the first checkbox is unchecked.

I have wirtten the following 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>

These are my javascript and GridView source code. I also has some textboxes in the template field columns. This condition is applicable to all the textboxes in the GridView. But the TextBoxes are enabled and disabled properly except the last CheckBox. I have given only the Source code for the two Checkboxes only. How to enable and disable the last checkbox in the GridView when the first the CheckBox is checked and Unchecked? I need all your suggestions please..

check this out stackoverflow.com/questions/3785791/…

Karthik
– Karthik

2011-11-22 12:24:08 +00:00
Commented Nov 22, 2011 at 12:24 — Karthik
– Karthik, Commented Nov 22, 2011 at 12:24

Munter · Accepted Answer · 2011-11-22 12:46:25Z

1

You should probably use event delegation. on the grid to do this.

This javascript assumes that your row tag name is 'tr' and that your second checkbox is input[1] when selecting all inputs of that particular row. If you need IE support you'd need to use your favorite event handling wrapper.

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);
}

This will handle change events on any input in the grid with a className of 'foo' as defined in the firstInputClassName variable. When triggered will walk up the dom tree to a node with a tagname equalling rowNodeName, select the inputs in that row and set the disabled status of the second input in that row opposite of the checked state of the input that triggered the event.

answered Nov 22, 2011 at 12:46

Munter

1,0895 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Munter Over a year ago

It installs itself when the window fires its onload handler. Of course if you already have an onload handler you might need to move the function code there. Other that that it should be enough to adjust rowNodeName and firstInputClassName and possibly input[1] to fit your case. I didn't have an example of your html to work on, so those three are just qualified guesses.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related