How to enable asp:LinkButton on client side

Question

I have asp:LinkButton, input Button defined as:

<asp:LinkButton ID="lnkViewPdf" runat="server" CssClass="icoMiniTest" ClientIDMode="Static" >View Office Pdf</asp:LinkButton>   
<input id="Button2" type="button" value="TestEnable" onclick="TestEnable(document.getElementById('lnkViewPdf'));"  />

the LinkButton is initially disabled in code-behind as:

    if (!IsPostBack)
    {
        this.lnkViewPdf.Enabled = false;
    }

and needs to be enabled when Button2 is clicked, so I am calling javascript function to enable the link as:

function TestEnable(lnkbutton) {
        alert('TestEnable() called');
        alert(lnkbutton.id);
        lnkbutton.disabled = "";
        //$("#lnkbutton").removeAttr('disabled');  //even this doesn't work
    }

But I am not able to enable the linkbutton.

Am I missing something?

Thank you!

__________________________________________________

Anyone interested in solution to above problem:
In code-behind:

this.lnkViewPdf.Attributes["disabled"] = "disabled";
this.lnkViewPdf.Attributes["onclick "] = "return false";

.js:

function TestEnable(lnkbutton) {
         $(lnkbutton).removeAttr('disabled');
        lnkbutton.onclick = "";    
}

NOTE: When setting lnkViewPdf.Enabled = false; LinkButton was being rendered as

<a id="lnkViewPdf" class="aspNetDisabled icoMiniTest">View Office Pdf</a>

see the style class aspNetDisabled, something added by ASP.Net
However setting disabled/onclick attributes from the codebehind as shown above, render Linkbutton as:

<a id="lnkViewPdf" class="icoMiniTest" disabled="disabled" onclick ="return false" href="javascript:__doPostBack(&#39;lnkViewPdf&#39;,&#39;&#39;)">View Office Pdf</a> 

HTH.

Answer 1

Try now...

function TestEnable(lnkbutton) {
    lnkbutton.disabled = "";
    lnkbutton.onclick = "";
}

Answer 2

In the code behind, rather than disable by setting Enabled = false, set:

    lnkViewPdf.Attributes["disabled"] = "disabled"

So your javascript function:

    function TestEnable(lnkbutton) {
    alert('TestEnable() called');
    alert(lnkbutton.id);
    lnkbutton.disabled = "";
}

Your markup:

    <asp:LinkButton ID="lnkViewPdf" runat="server" CssClass="icoMiniTest" ClientIDMode="Static" >View Office Pdf</asp:LinkButton>   
    <input id="Button2" type="button" value="TestEnable" onclick="TestEnable(document.getElementById('<%= lnkViewPdf.ClientID %>')); return false;"  />

And your code-behind:

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
            lnkViewPdf.Attributes["disabled"] = "disabled";
    }

Answer 3

$("#<%=lnkViewPdf.ClientID %>").removeAttr("disabled");

Answer 4

You need to know the .Net constructed name in order to accomplish it. The easiest way is to have it set in the head of the page if you can:

<script language="javascript">

var lnkbuttonToEnableId = "<%= this.lnkViewPdf.ClientId %>";

function TestEnable() {
        alert('TestEnable() called');
        lnkbuttonToEnableId.disabled = false;
}

</script>

At any rate, the only way to get it to work is to pass the ClientId of lnkViewPdf to the function somehow.

Answer 5

try both of those:

<input id="Button2" type="button" value="TestEnable"
    onclick="TestEnable(document.getElementById('<%= lnkViewPdf.ClientID %>'));"  />

or

$("#<%= lnkViewPdf.ClientID %>").removeAttr('disabled'); 

UPDATE: Since you are disabling the LinkButton on server side .NET strips the href attribute from the <a> html element. What you should do to prevent the lost of that information is to disable the LinkButton on the client and then enable it when you need to. Also instead of disabling it all you need to do is remove the href attribute.

So first you need to retain the href and remove it so the <a> link become disabled:

$(document).ready(function () {
    var $lnkViewPdf = $("#lnkViewPdf");

    $lnkViewPdf.data("href", $lnkViewPdf.attr("href"));
    $lnkViewPdf.removeAttr("href");
});

and the function that enables it:

function TestEnable(lnkViewPdfId) {
    var $lnkViewPdf = $("#" + lnkViewPdfId);

    $lnkViewPdf.attr("href", $lnkViewPdf.data("href"));
}

Answer 6

If you disable the LinkButton using:

if (!IsPostBack)
{
    this.lnkViewPdf.Enabled = false;
}

Then the href attibute won't be displayed in the HTML. If you manually add the disabled attribute instead:

if (!IsPostBack)
{
    lnkViewPdf.Attributes.Add("disabled", "disabled");
}

Then you're code will work just fine.

Oh!.. and one last thing: You need to set the PostBackUrl property for the LinkButton. You missed it in your example.