I'm currently working on a page that features a Bootstrap 3 table. This table includes multiple links and I want to disable these links when a certain option is selected.
Although I have successfully implemented the link disabling functionality, I now need to style it in such a way that the end user can visually see that the table has been disabled.
This is the code I am using:
<table class="table table-hover table-striped hidden-xs" id="clientListTable">
<tr>
<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>
<%}%>
</th>
</tr>
<tr>
<%
foreach (var cell in row.Cells)
{
if (cell.Hidden) { }
else {%><td onclick="return clickDisableFunction();"><%=cell.Value%></td><%}
}
%>
</tr>
Here is my JavaScript code:
var clickedOnce = false;
function clickDisableFunction()
{
if (clickedOnce == true)
{
return false;
};
clickedOnce = true;
document.getElementById('clientListTable').setAttribute("disabled","true")
};
While this setup functions correctly, users may not be aware that all other links are disabled when they click one. I would like to make the table fade out (turn a light grey) when a link is clicked.
Below is a screenshot of the table in question.
The only thing left to do is add a fading effect to the table when a link is clicked.