Stop ActionLink from being clicked using jquery

Question

I have seen a few solutions here on SO, and on the old Google search. However a lot of them seem to deal with the fact that it gets disabled after it is clicked, or if it does disable them it retains the ability to click it (in effect it is just greyed out).

I've currently got the following code which, as I say, greys out the ActionLink but it can still be clicked.

$(function DisableEnableLink() {
    var addDiv = document.getElementById('addNewItemDiv');
    // items is determined by logic which checks different values on the page, I have removed this logic as it works fine and isn't necessarily connected to the rest of the query.  
    //It returns 0 if the logic finds no items, or 'X' if it does.  This will then determine whether the Action link is enabled or disabled.
    if ($('items').length > 0) {
        addDiv.disabled = true;
    } else {
        addDiv.disabled = false;
    }
});

And my ActionLink is actually contained within a div as I can give that an ID.

<div id="addNewItemDiv">
    @Html.ActionLink("Add New Item", "Add");
</div>

How can I modify what I have to have it only display text? I can't use an if statement in the View as I'm populating data with jquery so the page won't post back.

Sorry I was modifying the code and forgot the comment explaining what `items` is, it is just a holder as it isn't necessarily important. The results do work and I get 0 or X (being the number of items) correctly, I just didn't think you needed to see that logic as it has no impact. I've updated the original post. — MattR, Feb 21 '14 at 10:36
Have a look at [this solution](http://stackoverflow.com/questions/7654900/how-do-you-make-an-anchor-link-non-clickable-or-disabled). — Andrei V, Feb 21 '14 at 10:43
Hi. Does this fiddle replicate your issue? http://jsfiddle.net/x9jmu/ — deostroll, Mar 07 '14 at 12:40

Sai Avinash · Answer 1 · 2014-02-21T11:10:06.517

0

You can do like this:

 @Html.ActionLink("Add New Item", "Add",new {id="Add"});

In your Jquery Code,

  if(check your condidtion here)
{
   $('Add').prop('disabled', true);
}

else
{
  $('Add').prop('disabled', false);

}

Set an ID to Helper and use jquery's PROP method to enable/diable the link condidtionally

Hope this helps..

Note: Diable link not entire div..if it is required for you to do so, just replace link's ID with div's ID

Updated2:

try using CSS to do it

Add a CSS Class like this:

.disableClick{
    pointer-events: none;
}

 @Html.ActionLink("Add New Item", "Add",new {id="Add",@class="disablelink"});

  if(your condidtion)
{
   $('#Add').addClass('disbaleClick');
}
else
{
   $(#Add).removeClass('disableClick');
}

edited Feb 21 '14 at 11:10

answered Feb 21 '14 at 10:38

Sai Avinash

4,683
17
58
96

Wouldn't that only work on the page load? This has to enable / disable the ActionLink depending repeatedly depending on different circumstances, e.g. a drop down list item being selected (all of this code works, it is just the final piece which is called to disable/enable the item which doesn't). – MattR Feb 21 '14 at 10:39
@MattR..Updated the coode try now – Sai Avinash Feb 21 '14 at 10:48
Unfortunately whilst that does grey it out I can still click the link which leads to an exception. That is the same as what happened in my original code. – MattR Feb 21 '14 at 10:55
Still no luck with that. I've added the CSS to my `Site.css` file, and I can add it to my View, but it doesn't get rid of the link. – MattR Feb 21 '14 at 12:00

score 0 · Answer 2 · answered Feb 21 '14 at 10:47

You can set the css property as :

pointer-events:none;

and then again to enable it, you can set pointer-events:auto

 $(function DisableEnableLink() {
    var addDiv = document.getElementById('addNewItemDiv');
    if ($('items').length > 0) {
        addDiv.disabled = true;
        $('addDiv').css('pointer-events','none')
    } else {
        addDiv.disabled = false;
        $('addDiv').css('pointer-events','auto')
    }
});

Stop ActionLink from being clicked using jquery

2 Answers2