# Programatically disabling Links created by link-to helper

**URL:** <https://discuss.emberjs.com/t/programatically-disabling-links-created-by-link-to-helper/3740>\
**Category:** Uncategorized\
**Created:** [January 2, 2014, 1:04pm UTC](https://discuss.emberjs.com/t/programatically-disabling-links-created-by-link-to-helper/3740 "2014-01-02T13:04:08Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![dhruvparmar372](https://avatars.discourse-cdn.com/v4/letter/d/50afbb/32.png) [@dhruvparmar372](https://discuss.emberjs.com/u/dhruvparmar372)\
**Post date:** [January 2, 2014, 1:04pm UTC](https://discuss.emberjs.com/t/programatically-disabling-links-created-by-link-to-helper/3740/1 "2014-01-02T13:04:08Z")

</div>

How can i disable links created by link-to helper programatically. I am trying to load a set of results in a list type view and want to disable links in each list item when more items are loading. Things I have already tried

1. Overiding the click event on the containing view.
2. Overiding click event on each ‘a’ tag … `$('a').click((e)-> e.preventDefault(); )`

---

<div class="post-metadata">

**Author:** ![kgautreaux](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/kgautreaux/32/5162_2.png) [@kgautreaux](https://discuss.emberjs.com/u/kgautreaux)\
**Post date:** [January 2, 2014, 4:40pm UTC](https://discuss.emberjs.com/t/programatically-disabling-links-created-by-link-to-helper/3740/2 "2014-01-02T16:40:41Z")

</div>

I think you could set the disabled property on the LinkView itself.

[http://emberjs.com/api/classes/Ember.LinkView.html#property\_disabled](http://emberjs.com/api/classes/Ember.LinkView.html#property_disabled)

---

<div class="post-metadata">

**Author:** ![dhruvparmar372](https://avatars.discourse-cdn.com/v4/letter/d/50afbb/32.png) [@dhruvparmar372](https://discuss.emberjs.com/u/dhruvparmar372)\
**Post date:** [January 3, 2014, 5:01am UTC](https://discuss.emberjs.com/t/programatically-disabling-links-created-by-link-to-helper/3740/3 "2014-01-03T05:01:06Z")

</div>

the problem is that would work through bindings and having more number of links i would be propagating the same effect to each of the link through bindings which would be a costly operation.

Something that disables click on the entire view would be more helpful so that the click event doesn’t propagate to the links. Something like `$('a').bind('click',(e)-> e.preventDefault())` … but this doesn’t seem to work.

One more interesting thing I observed was that links created by the link-to helper trigger transitions even when the default behaviour of click event on them is prevented. Why does this happen ??

---

<div class="post-metadata">

**Author:** ![kgautreaux](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/kgautreaux/32/5162_2.png) [@kgautreaux](https://discuss.emberjs.com/u/kgautreaux)\
**Post date:** [January 3, 2014, 5:46am UTC](https://discuss.emberjs.com/t/programatically-disabling-links-created-by-link-to-helper/3740/4 "2014-01-03T05:46:49Z")

</div>

Ok, sorry. Didn’t know you’d already tried that and found it too slow.

Though, in my defense your question was, “How do I do it?” Not, “How do I do it performantly?” 😉

You can make the link-to helper use any tagName. Maybe you could make the whole ‘li’ a link and still use the binding?

I’m not an expert in Ember, but I have heard it said frequently by those who are that if you seem to be fighting the framework you should rethink your design or approach to be more Ember-friendly. I hope someone with more chops than me can answer your query.

---

<div class="post-metadata">

**Author:** ![ianpetzer](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ianpetzer/32/14334_2.png) [@ianpetzer](https://discuss.emberjs.com/u/ianpetzer)\
**Post date:** [March 5, 2014, 6:27am UTC](https://discuss.emberjs.com/t/programatically-disabling-links-created-by-link-to-helper/3740/5 "2014-03-05T06:27:00Z")

</div>

I had a similar issue. I wanted to disable all forms of interaction with the page while I was showing a left hand nav menu that would slide in and out for a mobile app.

I ended up putting a transparent div behind the page and would then give it the highest z-index on the page when I didn’t want the user to be able to click the links. Once a nav option had been selected, this div would be given the lowest z-index on the page again.

---

<div class="post-metadata">

**Author:** ![skoryky](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/skoryky/32/15434_2.png) [@skoryky](https://discuss.emberjs.com/u/skoryky)\
**Post date:** [April 11, 2014, 11:22pm UTC](https://discuss.emberjs.com/t/programatically-disabling-links-created-by-link-to-helper/3740/6 "2014-04-11T23:22:52Z")

</div>

I too needed to disable link-to helpers, and ended up aborting transitions in the `willTransition` action of the route. I let specific transitions go through by checking their `targetName`.

---

<div class="post-metadata">

**Author:** ![sftsk](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/sftsk/32/15782_2.png) [@sftsk](https://discuss.emberjs.com/u/sftsk)\
**Post date:** [May 9, 2014, 8:36am UTC](https://discuss.emberjs.com/t/programatically-disabling-links-created-by-link-to-helper/3740/7 "2014-05-09T08:36:52Z")

</div>

Heya, managed to solve it like this:

`$('a').click(function () {return false;});`

in `didInsertElement` on the view (almost the same as your second suggestion).

Hope this helps anyone.

---

<div class="post-metadata">

**Author:** ![splattne](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/splattne/32/3694_2.png) [@splattne](https://discuss.emberjs.com/u/splattne)\
**Post date:** [September 5, 2014, 2:29pm UTC](https://discuss.emberjs.com/t/programatically-disabling-links-created-by-link-to-helper/3740/8 "2014-09-05T14:29:15Z")

</div>

You can also do it in your template using the `disabled`property of the link-to helper (which wraps the Ember.LinkView). Example:

```
 {{#link-to "post" deletedPost disabled=deletedPost.isDeleted}}
     {{post.title}}
 {{/link-to}}

```

---

<div class="post-metadata">

**Author:** ![jasonmit](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jasonmit/32/182_2.png) [@jasonmit](https://discuss.emberjs.com/u/jasonmit)\
**Post date:** [September 5, 2014, 3:45pm UTC](https://discuss.emberjs.com/t/programatically-disabling-links-created-by-link-to-helper/3740/9 "2014-09-05T15:45:39Z")

</div>

A little jsfiddle demonstrating this:

> **[Ember Latest - JSFiddle - Code Playground](http://jsfiddle.net/NQKvy/1289/)**
>
> Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.