Need To Disable A Table When A Link Clicked

Question

I have a bootstrap 3 table which contains links. What i'm after is to disable the table when one of the links are click and also for the table to give the user a visual that the table is disabled (eg turn to a light transparent gray color and make the other links none underline when hovered over.

The code below is how my table is populated

<table class="table table-hover table-striped hidden-xs" id="clientListTable">
                <tr><%
                foreach (var cell in data.Header.Cells)
                {
                    var showFilterOption = (cell.DisplayType == AJBG.Web.Services.Entities.Enums.ColumnDisplayType.Currency || cell.DisplayType == AJBG.Web.Services.Entities.Enums.ColumnDisplayType.Double || cell.DisplayType == AJBG.Web.Services.Entities.Enums.ColumnDisplayType.Integer);
                    var filterIcon = ResolveUrl("~/Resources/Images/Interface/filter_icon.png");
                    var sortDirection = AJBG.Web.Services.Entities.Enums.ColumnSortOrder.Ascending.ToString();
                    if (data.ColumnSort == cell.SortOn && data.ColumnSortDirection == AJBG.Web.Services.Entities.Enums.ColumnSortOrder.Ascending)
                    {
                        sortDirection = AJBG.Web.Services.Entities.Enums.ColumnSortOrder.Descending.ToString();
                    }
                    %>
                    <th>
                        <a href="<%=Html.GenerateLoopBackUrl(true, new { ClientList_SortOn = cell.SortOn, ClientList_SortDirection = sortDirection })%>"><%=cell.Value%></a>
                        <%if (showFilterOption)
                            { %> 
                                <a href="#" id="<%:cell.ColumnIdentifier%>_link" class="noPdf">
                                    <span class="glyphicon glyphicon-filter" id="<%:cell.ColumnIdentifier%>_img"></span>
                                </a>
                                <%--<img src="<%= filterIcon%>" alt="add filter" id="<%:cell.ColumnIdentifier%>_img" />--%>
                        <%}%>
                    </th>
                <% }%> 
                </tr>

                <%Int32 count = 0;
                    foreach (var row in data.Rows)
                    { %>
                    <tr>
                        <%
                            foreach (var cell in row.Cells)
                            {
                                    if (cell.Hidden) { }
                                    else {%><td onclick="return clickDisableFunction();"><%=cell.Value%></td><%}
                            }
                        %>
                    </tr>
                    <%
                    count++;
                    } 
                    if (data.ShowTotal)
                    { %>
                    <tr>
                        <%
                            foreach (var cell in data.Total.Cells)
                            { 
                                %><td><strong><%=cell.Value%></strong></td><%
                            }
                        %>
                    </tr>
                <% }%>
                </table>

The below Java is what I have tried and it appears to work

    function RedirectClientView()
{
    //document.location.href = $('Views_DropDownList').value;
    document.location.href = document.getElementById('Views_DropDownList').value;
}
var clickedOnce = false;

function clickDisableFunction()
{
    if (clickedOnce == true)
    {
        return false;
    };
    clickedOnce = true;
    document.getElementById('clientListTable').setAttribute("disabled","true")
};

But although this disables the links in the table, it does not give the user the impression the table is disabled.

As I said I want it to display some sort of transparent gray box over the table. How do I achieve this using css and/or jquery

Answer 1

CSS:

.table-inactive {
    opacity: 0.6;
}

javascript:

var table = document.getElementById("clientListTable")
    table.className = table.className + " table-inactive";

or jQuery:

var $table = $("#clientListTable");
    $table.addClass("table-inactive");

That should do it, it doesn't cover the table, but it will appear faded out with the opacity. (place the CSS/JS where you need/want it)

Answer 2

Try this . I am writing a generic solution . Hope this may help :-

modal-backdrop in modal-backdrop in

I guess you are having bootstrap.css in your application . Keeping that in mind :- There is a class that bootstrap3 provides . 。 Add a div containing this class before your <table> like this :-

$("#lnk1,#lnk2,#lnk3").on("click",function(){

     $("#tableId").before("<div class='modal-backdrop  in'></div>");

 });

I have a personal experience with this feature .

Opacity Opacity

 $("#lnk1,#lnk2,#lnk3").on("click",function(){

     $("#tableId").css({'opacity':'0.4'});

 });

Hope this would help you .

Cheers !!

Answer 3

function clickDisableFunction()
{
    if (clickedOnce == true)
    {
        return false;
    };
    clickedOnce = true;
    $("#clientListTable").css( "opacity":"0.6" );
    document.getElementById('clientListTable').setAttribute("disabled","true")

};

Answer 4

只需将表的不透明度降低到一半，然后将链接文本的颜色设置为灰色等浅色，以使其具有被禁用的感觉。

Answer 5

决定使用效果最佳的模式