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

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

• javascript
• angular
• typescript

• 1 Links can't be disabled using the disabled attribute: stackoverflow./a/13955695/1903366 – lukasgeiter Commented Sep 3, 2019 at 13:29
• 2 You could try adding a disabled class to the link with css .disabled{ pointer-events: none }? – Jason White Commented Sep 3, 2019 at 13:30
• TypeScript pilation 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 developer.mozilla/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 Commented Sep 3, 2019 at 13:40

5 Answers 5

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>

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";

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.

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.

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