Question

I was wondering if someone could help me with a bit of javascript and MVC. To give a bit of background…in my application there are a number of Groups, which have individual shops under the umbrella of those groups. Previously, a user could select each individual shop, however I want to change the application to have the user just select the group. This in turn would select all the individual shops under that group as the underlying workings of the application must remain the same.

Here is the existing HTML page…I have changed the style of the checkboxes of the individual shops to be hidden. There is also some javascript which checks all, or unchecks all the shops under the Group header. The bit of help I need on the javascript now is, if the user hits select, the select link becomes disabled and vice versa for the deselect link.

If anyone could help I’d be very grateful. If more info is needed just ask!

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <script type="text/javascript">
        function select(sectionId) {
            toggle(sectionId, "checked");
        }

        function deselect(sectionId) {
            toggle(sectionId, null);
        }

        function toggle(sectionId, checked) {
            $('[section$=' + sectionId + ']').each(function () { $(this).attr('checked', checked); });
        }

    </script>
    <div>
        <% int i = 0; %>
        <% Html.BeginForm(); %>
        <% { %>
        <% foreach (myApp.Web.Models.ShopGroup g in Model.Groups) %>
        <% { %>
        <div style="width:800px;">
            <div style="border-bottom: 1px solid;">
                <div style="font-weight: bold; width: 300px; float: left;">
                    <%: g.GroupHeader%>
                </div>
                <div style="line-height: 18px; vertical-align: middle; width: 250px; float: left;">
                    <a id="select" href="javascript:select(<%: i %>)" <%: ViewData["GROUP_ALL_SELECTED_" + g.GroupHeader] %>>
                        Select</a> / <a id="deselect" href="javascript:deselect(<%: i %>)" <%: ViewData["GROUP_ALL_SELECTED_" + g.GroupHeader] %>>
                            Deselect</a>
                </div>
                <div style="clear: both;">
                </div>
            </div>
        </div>
        <div style="margin-left: 10px; margin-top: 10px;">
            <% foreach (myApp.Data.Shop shop in g.Shops) %>
            <% { %>
            <div style="float: left; line-height: 18px; padding: 2px; margin: 2px; vertical-align: middle;
                border: 1px solid; width: 282px;">
                <input type="checkbox" style="display:none;" section="<%: i %>" name="SHOP_<%: shop.ShopID %>" <%: ViewData["SHOP_" + shop.ShopID] %>
                    style="vertical-align: middle; padding-left: 5px;" />
                <%= Html.TrimTextToLength(shop.Name)%>
            </div>
            <% } %>
        </div>
        <div style="clear: both; margin-bottom: 15px;">
            &nbsp;</div>
        <% i++; %>
        <% } %>
        <br />
        <br />
        <div class="btnFooter">
            <input type="submit" value="Update" />
        </div>
        <div style="clear: both;">
        </div>
        <% } %>
    </div>
</asp:Content>

Answer 1

Expand the deselect and select functions with the following code, respectively:

$("#deselect").css("visibility", "hidden");
$("#select").css("visibility", "hidden");

When you want to show the link again:

$("#deselect").css("visibility", "visible");
$("#deselect").css("visibility", "visible");