Question

I have a grid and button inside a template field like following:

<asp:TemplateField>
<ItemTemplate>
    <input type="button" value="Map Route" onclick="MapRoute('<%# ((GridViewRow) Container).RowIndex %>')" />
</ItemTemplate>
</asp:TemplateField>

I want to change text of button from “Map Route” to “Unmap Route” when user click on it and I also want to disable all buttons in other rows of this column using Javascript or JQuery

EDIT:
If above is not possible then only changing text of button which is clicked.

Edit2: HTML

 <table cellspacing="0" cellpadding="3" rules="all" border="1" id="gvRider" style="border-color: White;
    border-width: 1px; border-style: Solid; width: 100%; border-collapse: collapse;">
    <tr class="gridtitlebg" align="left" style="height: 35px;">
        <th align="center" scope="col">
            #
        </th>
        <th scope="col">
            Dist From Start (mi)
        </th>
        <th scope="col">
            Start
        </th>
        <th scope="col">
            Dist From End (mi)
        </th>
        <th scope="col">
            Return
        </th>
        <th scope="col">
            Commuting Days
        </th>
        <th scope="col">
            Male/Female
        </th>
        <th scope="col">
            Smoker/Non-Smoker
        </th>
        <th scope="col">
            Drive/Non-Drive
        </th>
        <th scope="col">
            Bike-Buddy
        </th>
        <th scope="col">
            Email
        </th>
        <th scope="col" style="width: 30px;">
            Map Route
        </th>
    </tr>
    <tr class="grdtext1" align="left" style="background-color: White; height: 30px;">
        <td align="center" style="width: 20px;">
            1
        </td>
        <td align="center" style="width: 70px;">
            0.73
        </td>
        <td align="center" style="width: 50px;">
            08:20 AM
        </td>
        <td align="center" style="width: 70px;">
            &nbsp;
        </td>
        <td align="center" style="width: 50px;">
            07:05 PM
        </td>
        <td align="left" style="width: 110px;">
            <table cellspacing="9" border="0" style="width: 100%;">
                <tr>
                    <td>
                        <img src="../Images/icons/days/mon.png" style="border-width: 0px;" />
                    </td>
                    <td>
                        <img src="../Images/icons/days/th.png" style="border-width: 0px;" />
                    </td>
                    <td>
                        <img src="../Images/icons/days/wed.png" style="border-width: 0px;" />
                    </td>
                    <td>
                        <img src="../Images/icons/days/thu.png" style="border-width: 0px;" />
                    </td>
                    <td>
                        <img src="../Images/icons/days/fri.png" style="border-width: 0px;" />
                    </td>
                </tr>
            </table>
        </td>
        <td align="center" style="width: 70px;">
            <table cellspacing="9" border="0" style="width: 78%;">
                <tr>
                    <td>
                        <img title="Male" src="../Images/icons/filter/icon_male.png" style="border-width: 0px;" />
                    </td>
                </tr>
            </table>
        </td>
        <td align="center" style="width: 70px;">
            <table cellspacing="9" border="0" style="width: 78%;">
                <tr>
                    <td>
                        <img title="Smoker" src="../Images/icons/filter/icon_smoker.png" style="border-width: 0px;" />
                    </td>
                </tr>
            </table>
        </td>
        <td align="center" style="width: 70px;">
            <table cellspacing="9" border="0" style="width: 78%;">
                <tr>
                    <td>
                        <img title="Not-Driver" src="../Images/icons/filter/noncar_icon.png" style="border-width: 0px;" />
                    </td>
                </tr>
            </table>
        </td>
        <td align="center" style="width: 70px;">
            <table cellspacing="9" border="0" style="width: 78%;">
                <tr>
                    <td>
                        <img title="Bike-buddy" src="../Images/icons/filter/icon_bike.png" style="border-width: 0px;" />
                    </td>
                </tr>
            </table>
        </td>
        <td align="center" style="width: 54px;">
            <input type="image" name="gvRider$ctl02$imgBtnEmail" id="gvRider_ctl02_imgBtnEmail"
                title="Send Email" src="../App_Themes/default/images/sendemail.png" style="border-width: 0px;" />
        </td>
        <td>
            <input type="button" value="Map Route" onclick="MapRoute('0')" />
        </td>
    </tr>
    <tr class="grdtext1" align="left" style="background-color: #D2E8F9; height: 30px;">
        <td align="center" style="width: 20px;">
            2
        </td>
        <td align="center" style="width: 70px;">
            0.94
        </td>
        <td align="center" style="width: 50px;">
            05:25 AM
        </td>
        <td align="center" style="width: 70px;">
            1.05
        </td>
        <td align="center" style="width: 50px;">
            02:20 PM
        </td>
        <td align="left" style="width: 110px;">
            <table cellspacing="9" border="0" style="width: 100%;">
                <tr>
                    <td>
                        <img src="../Images/icons/days/mon.png" style="border-width: 0px;" />
                    </td>
                    <td>
                        <img src="../Images/icons/days/th.png" style="border-width: 0px;" />
                    </td>
                    <td>
                        <img src="../Images/icons/days/wed.png" style="border-width: 0px;" />
                    </td>
                    <td>
                        <img src="../Images/icons/days/thu.png" style="border-width: 0px;" />
                    </td>
                    <td>
                        <img src="../Images/icons/days/fri.png" style="border-width: 0px;" />
                    </td>
                </tr>
            </table>
        </td>
        <td align="center" style="width: 70px;">
            <table cellspacing="9" border="0" style="width: 78%;">
                <tr>
                    <td>
                        <img title="Male" src="../Images/icons/filter/icon_male.png" style="border-width: 0px;" />
                    </td>
                </tr>
            </table>
        </td>
        <td align="center" style="width: 70px;">
            <table cellspacing="9" border="0" style="width: 78%;">
                <tr>
                    <td>
                        <img title="Non-smoker" src="../Images/icons/filter/icon_nonsmoker.png" style="border-width: 0px;" />
                    </td>
                </tr>
            </table>
        </td>
        <td align="center" style="width: 70px;">
            <table cellspacing="9" border="0" style="width: 78%;">
                <tr>
                    <td>
                        <img title="Driver" src="../Images/icons/filter/icon_carpool.png" style="border-width: 0px;" />
                    </td>
                </tr>
            </table>
        </td>
        <td align="center" style="width: 70px;">
            <table cellspacing="9" border="0" style="width: 78%;">
                <tr>
                    <td>
                        <img title="Bike-buddy" src="../Images/icons/filter/icon_bike.png" style="border-width: 0px;" />
                    </td>
                </tr>
            </table>
        </td>
        <td align="center" style="width: 54px;">
            <input type="image" name="gvRider$ctl03$imgBtnEmail" id="gvRider_ctl03_imgBtnEmail"
                title="Send Email" src="../App_Themes/default/images/sendemail.png" style="border-width: 0px;" />
        </td>
        <td>
            <input type="button" value="Map Route" onclick="MapRoute('1')" />
        </td>
    </tr>

</table>

Thanks!

Answer 1

This seems to work well for me:

<asp:TemplateField>
<ItemTemplate>
    <input type="button" value="Map Route" onclick="MapRoute('<%# ((GridViewRow) Container).RowIndex %>')" class="map-button" />
</ItemTemplate>
</asp:TemplateField>

Note: Added “map-button” to class attribute.

<script type="text/javascript">
var mapOpen = false;

$(function () {
    $('.map-button').on('click', function () {
        if(mapOpen) {
            $('.map-button').removeAttr('disabled');
            $(this).val('Map Route');      
            mapOpen = false;
        }
        else {   
            $('.map-button').attr('disabled', 'disabled');
            $(this).val('Unmap Route').removeAttr('disabled');
            mapOpen = true;
        }
    });
});​
</script>