Habilitar TextBox dentro de GridView mediante CheckBox

Question

Buen día expertos, me atoré con un problema que no consigo resolver. Tengo el siguiente GridView en una página:

El cual lleno con un DataTable, el código del GV es el siguiente: 

<asp:GridView ID="dgvTransferencia" runat="server" BackColor="White" BorderColor="#999999" BorderStyle="None" BorderWidth="1px" CellPadding="5" AutoGenerateColumns="False" >

    <Columns>

        <asp:BoundField DataField="Artículo" AccessibleHeaderText="Artículo" HeaderText="Artículo" />
        <asp:BoundField DataField="Descripción" AccessibleHeaderText="Descripción" HeaderText="Descripción" />
        <asp:BoundField DataField="Cantidad" AccessibleHeaderText="Cantidad" HeaderText="Cantidad" />
        <asp:BoundField DataField="Unidad" AccessibleHeaderText="Unidad" HeaderText="Unidad" />

        <asp:TemplateField>
            <HeaderTemplate>
                <asp:CheckBox ID="chkHeader" runat="server" />
            </HeaderTemplate>
            <ItemTemplate>
                <asp:CheckBox ID="chkRow" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>

        <asp:TemplateField AccessibleHeaderText="Faltante" HeaderText="Faltante">
            <ItemTemplate>
                <asp:TextBox ID="txtDGVCantidad" runat="server" Text="" TextMode="Number" Width="45" style="text-align: center" Enabled="false"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>

    </Columns>

    <FooterStyle BackColor="#CCCCCC" ForeColor="Black" />
    <HeaderStyle BackColor="#000084" Font-Bold="True" ForeColor="White" />
    <PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
    <RowStyle BackColor="#EEEEEE" ForeColor="Black" HorizontalAlign="Center" VerticalAlign="Middle" />
    <SelectedRowStyle BackColor="#AB8246" Font-Bold="True" ForeColor="White" />
    <SortedAscendingCellStyle BackColor="#F1F1F1" />
    <SortedAscendingHeaderStyle BackColor="#0000A9" />
    <SortedDescendingCellStyle BackColor="#CAC9C9" />
    <SortedDescendingHeaderStyle BackColor="#000065" />
</asp:GridView>  

Lo que trato de lograr es que al marcar algún CheckBox, se habilite el TextBox de esa fila, en caso de que se seleccione la casilla del Header, que todos los TextBox del Grid se habiliten. He intentado usando la siguiente función en JavaScript:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">
    $(function () {
        //Enable Disable all TextBoxes when Header Row CheckBox is checked.
        $("[id*=chkHeader]").bind("click", function () {
            var chkHeader = $(this);

            //Find and reference the GridView.
            var grid = $(this).closest("table");

            //Loop through the CheckBoxes in each Row.
            $("td", grid).find("input[type=checkbox]").each(function () {
               
                //If Header CheckBox is checked.
                //Then check all CheckBoxes and enable the TextBoxes.
                if (chkHeader.is(":checked")) {
                    $(this).attr("checked", "checked");
                    var td = $("td", $(this).closest("tr"));
                    td.css({ "background-color": "#D8EBF2" });
                    $("input[type=text]", td).removeAttr("disabled");
                } else {
                    $(this).removeAttr("checked");
                    var td = $("td", $(this).closest("tr"));
                    td.css({ "background-color": "#FFF" });
                    $("input[type=text]", td).attr("disabled", "disabled");
                }
            });
        });
    });
</script>
<script type = "text/javascript">
    $(function () {
        //Enable Disable TextBoxes in a Row when the Row CheckBox is checked.
        $("[id*=chkRow]").bind("click", function () {

            //Find and reference the GridView.
            var grid = $(this).closest("table");

            //Find and reference the Header CheckBox.
            var chkHeader = $("[id*=chkHeader]", grid);

            //If the CheckBox is Checked then enable the TextBoxes in thr Row.
            if (!$(this).is(":checked")) {
                var td = $("td", $(this).closest("tr"));
                td.css({ "background-color": "#FFF" });
                $("input[type=text]", td).attr("disabled", "disabled");
            } else {
                var td = $("td", $(this).closest("tr"));
                td.css({ "background-color": "#D8EBF2" });
                $("input[type=text]", td).removeAttr("disabled");
            }

            //Enable Header Row CheckBox if all the Row CheckBoxes are checked and vice versa.
            if ($("[id*=chkRow]", grid).length == $("[id*=chkRow]:checked", grid).length) {
                chkHeader.attr("checked", "checked");
            } else {
                chkHeader.removeAttr("checked");
            }
        });
    });
</script>

Y al ejecutarlo si aplica los cambios de color de la funcion JS cuando activo o desactivo un Check, pero los TextBox no se habilitan. 

¿Alguien me podrá ayudar a identificar qué estoy haciendo mal? El código lo copié de un ejemplo en asp.snippets: Enlace

Agradezco de antemano cualquier comentario, ejemplo u orientación que puedan brindarme. Saludos cordiales.

Answer 1

El problema es que el TextBox que tratas de habilitar tiene la propiedad TextMode establecida a "Number". Esto en HTML5 no crea un input con type="text", si no con type="number".

Deberías cambiar los selectores jQuery en los que se busca inputs con el type="text" (por ejemplo: "$("input[type=text]", td)") por selectores con type="number".

 

---

Píldoras .NET
Artículos, tutoriales y ejemplos de código .NET

Píldoras JS
Artículos, tutoriales y ejemplos de código JavaScript, HTML5, CSS3, ...

Answer 2

Asier muchas gracias por tu respuesta, cambié los selectores a como me indicaste y ahora ya funciona correctamente, me siento bobo por haber pasado por alto algo así, voy iniciando en JS y jQuery.

De nuevo muchas gracias! Un saludo.