javascript - 使用 Javascript 或 JQuery 更改网格内按钮的文本并禁用列中的其他按钮

Question

我在模板字段中有一个网格和按钮，如下所示：

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

当用户单击它时，我想将按钮的文本从“Map Route”更改为“Unmap Route”，并且我还想使用Javascript或JQuery禁用此列其他行中的所有按钮

编辑：如果以上是不可能的，那么只改变被点击的按钮的文本。

编辑2：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>

谢谢！

score 0 · Accepted Answer

您可以使用 CSS 为要隐藏的按钮元素创建一个类，然后让 JQuery 函数将这些元素切换到隐藏它们的另一个类。

$("#button_id").click(function () {

            $(".buttons_to_hide_class").toggleClass("hidden");
            $(this).text() = "UnMap Route"; // Not sure if this is right. The rest should be.

            return false;

        });

CSS：

button.buttons_to_hide_class{
//Fill in how you want them to look
}

button.buttons_to_hide_class.hidden{
display:none;
visibility:hidden;
}

score 0 · Accepted Answer

这似乎对我很有效：

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

注意：在类属性中添加了“地图按钮”。

<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>

score 0 · Accepted Answer

看看这个 jsFiddle。 http://jsfiddle.net/bngHu/

我将其设置为禁用与单击的按钮相同的行和列中的所有按钮（包括按钮本身）。

HTML...

<table>
<tr>
    <td>
        <input class="map-button" type="button" value="Map Route">
    </td>
    <td>
        <input class="map-button" type="button" value="Map Route">
    </td>
    <td>
        <input class="map-button" type="button" value="Map Route">
    </td>
    <td>
        <input class="map-button" type="button" value="Map Route">
    </td>
    <td>
        <input class="map-button" type="button" value="Map Route">
    </td>
</tr>
<tr>
    <td>
        <input class="map-button" type="button" value="Map Route">
    </td>
    <td>
        <input class="map-button" type="button" value="Map Route">
    </td>
    <td>
        <input class="map-button" type="button" value="Map Route">
    </td>
    <td>
        <input class="map-button" type="button" value="Map Route">
    </td>
    <td>
        <input class="map-button" type="button" value="Map Route">
    </td>
</tr>
<tr>
    <td>
        <input class="map-button" type="button" value="Map Route">
    </td>
    <td>
        <input class="map-button" type="button" value="Map Route">
    </td>
    <td>
        <input class="map-button" type="button" value="Map Route">
    </td>
    <td>
        <input class="map-button" type="button" value="Map Route">
    </td>
    <td>
        <input class="map-button" type="button" value="Map Route">
    </td>
</tr>
<tr>
    <td>
        <input class="map-button" type="button" value="Map Route">
    </td>
    <td>
        <input class="map-button" type="button" value="Map Route">
    </td>
    <td>
        <input class="map-button" type="button" value="Map Route">
    </td>
    <td>
        <input class="map-button" type="button" value="Map Route">
    </td>
    <td>
        <input class="map-button" type="button" value="Map Route">
    </td>
</tr>
<tr>
    <td>
        <input class="map-button" type="button" value="Map Route">
    </td>
    <td>
        <input class="map-button" type="button" value="Map Route">
    </td>
    <td>
        <input class="map-button" type="button" value="Map Route">
    </td>
    <td>
        <input class="map-button" type="button" value="Map Route">
    </td>
    <td>
        <input class="map-button" type="button" value="Map Route">
    </td>
</tr>
</table>

$(document).ready(function(){
    $('.map-button').click(function(e){
        $(this).val('Unmap Route');

        $(this).parent().parent().find(".map-button").attr('disabled', 'disabled');

        var col = $(this).parent().parent().children().index($(this).parent());

        $.each($('tr'), function() {
            $(this).find('td:nth(' + col + ')').find('.map-button').attr('disabled', 'disabled');
        });


    });
});

javascript - 使用 Javascript 或 JQuery 更改网格内按钮的文本并禁用列中的其他按钮

3 回答 3

Related

Reference