1

What I am trying to do is that when the user enters, based on their role, enable or disable anchor element. Try several ways:

document.getElementById('myBtn').disabled = true;

This shows me: The property 'disabled' does not exist in type 'HTMLElement'.

Researching try with:

(document.getElementById('myBtn') as any).disabled = true;

It doesn't show me any errors but it doesn't work either.

And with the property of angular [disabled] it shows me: Can't bind to 'disabled' since it isn't a known property of 'a'.

Some alternative? regards

isherwood
  • 58,414
  • 16
  • 114
  • 157
Agu Fortini
  • 85
  • 1
  • 12
  • 1
    Links can't be disabled using the `disabled` attribute: https://stackoverflow.com/a/13955695/1903366 – lukasgeiter Sep 03 '19 at 13:29
  • 2
    You could try adding a disabled class to the link with css `.disabled{ pointer-events: none }`? – Jason White Sep 03 '19 at 13:30
  • TypeScript compilation is letting you know that there is not a `disabled` property on generic HTML elements. It won't work even if you cast it to an https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement because such property does not exist. If you can style a button to look like a link, then you would achieve the same effect if you don't mind submitting a form – Ruan Mendes Sep 03 '19 at 13:40

5 Answers5

3

You can not 'disable' an anchor tag. Source. MDN

The disabled attribute is allowed only for form controls. Using it with an anchor tag (an link) will have no effect.

As an alternative, you can disable mouse pointer interaction.

CSS:

a.disabled-link {
  pointer-events: none;
  cursor: default;
}

HTML:

<a href="foo.html" class="disabled-link">Link</a>
0xc0de
  • 8,028
  • 5
  • 49
  • 75
  • Note that specifying `disabled-link` duplicates the information, since `a` already means links. `a.disabled` means the same thing – Ruan Mendes Sep 03 '19 at 13:44
1

Because link doesn't contain disable property, so you can do it manually by creating class

.link-disabled {
    pointer-events: none;
    color: lightgray;
}

Then you can add this class to link like this

var element = document.getElementById("myBtn");
element.classList.add("link-disabled");

or for older browsers:

var element  = document.getElementById("myBtn");
element .className += " link-disabled";
Przemek Struciński
  • 4,990
  • 1
  • 28
  • 20
1

disabled property is available with elements like input, button which are mostly related to forms. <a> tag can't be disabled directly. You have to set pointer-events css property to none.

JsNgian
  • 795
  • 5
  • 19
1

Unfortunately (and even if it's relatively well supported) pointer-events is a non-standard feature and I would discourage it from being used.

I would place a transparent element over the link to prevent user interaction.

This element would have to be a sibling of the anchor element. Set the parent position to relative, and siblings position to absolute, then set siblings z-index accordingly and use javascript to display/un-display the mask.

Ernesto Stifano
  • 3,027
  • 1
  • 10
  • 20
-1

There is no disabled attribute for hyperlinks. If you don't want something to be linked then you'll need to remove the tag altogether, or remove its href attribute.

or you can also use

<a href="javascript:void(0)" style="cursor: default;">123n</a>

click here to see the example

Zulqarnain Jalil
  • 1,679
  • 16
  • 26