Javascript unable to disable asp.NET linkButton

Question

I looked through the net and my code but I can't find the problem. Please help. My codes are below. I created a few linkbuttons which calls a postback to backend which triggers the javascript to disable/enable the linkbuttons. Unfortunately, I'm unable to do so. Can it even be done via javascript? Any idea why?

Please help... thanks

<ul class="nav nav-tabs">
      <li role="presentation" class="active" ID="tab1"><asp:LinkButton ID="tab1Link" runat="server"><strong>Basic</strong></asp:LinkButton></li>
      <li role="presentation" ID="tab2"><asp:LinkButton ID="tab2Link" runat="server"><strong>Details+</strong></asp:LinkButton></li>
      <li role="presentation" ID="tab3"><asp:LinkButton ID="tab3Link" runat="server"><strong>Location</strong></asp:LinkButton></li>
      <li role="presentation" ID="tab4"><asp:LinkButton ID="tab4Link" runat="server"><strong>Media</strong></asp:LinkButton></li>
      <li role="presentation" ID="tab5"><asp:LinkButton ID="tab5Link" runat="server" OnClientClick="javascript: tabSeq('tab5', 5)"><strong>Summary</strong></asp:LinkButton></li>
    </ul>




function tabSeq(activeTab, numberOfTabs) 
{
var tabOKVal = "";
for (var i = 1; i <= numberOfTabs; i++)
{
    document.getElementById('tab'+ i).className = "";
    document.getElementById('tab'+ i+"Div").style.display = 'none';

    tabOKVal = document.getElementById('tabOK'+ i).value;
    if(tabOKVal == "OK" && i != numberOfTabs)
    {
        document.getElementById('tab' + (i+1) + 'Link').disabled = "";
        document.getElementById('tab' + (i+1) + 'Link').style.color = '#3498DB';
    }
}
document.getElementById('tab5Link').disabled = "disabled";
document.getElementById(activeTab).style.color = '#555555';
document.getElementById(activeTab).className = "active";
document.getElementById(activeTab+"Div").style.display = '';
}

Answer 1

 onload = function(){ tabSeq('tab5', 5) } function tabSeq(activeTab, numberOfTabs) { //other stuff goes here document.getElementById('tab5Link').disabled = true; document.getElementById(activeTab).style.color = '#555555'; document.getElementById(activeTab).className = "active"; document.getElementById(activeTab+"Div").style.display = ''; } 

 <ul class="nav nav-tabs"> <li role="presentation" class="active" ID="tab1"><asp:LinkButton ID="tab1Link" runat="server"><strong>Basic</strong></asp:LinkButton></li> <li role="presentation" ID="tab2"><asp:LinkButton ID="tab2Link" runat="server"><strong>Details+</strong></asp:LinkButton></li> <li role="presentation" ID="tab3"><asp:LinkButton ID="tab3Link" runat="server"><strong>Location</strong></asp:LinkButton></li> <li role="presentation" ID="tab4"><asp:LinkButton ID="tab4Link" runat="server"><strong>Media</strong></asp:LinkButton></li> <li role="presentation" ID="tab5"><button ID="tab5Link" runat="server" OnClientClick="javascript: tabSeq('tab5', 5)"><strong>Summary</strong></button></li> </ul> 

Answer 2

LinkButtons are ASP.NET server controls and they are not accessible by the control ID value which you see in design time.

You can rewrite the js code as follows:

document.getElementById("<%= tab5Link.ClientID %>").disabled = "disabled";

Please note that this can be done only the JS code is on the same page.