CODEWITHSUNDEEP
javascriptangulartypescript
Agu Fortini
Agu Fortini

Reputation: 95

I can't disable an anchor with the 'disabled' property

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

Upvotes: 1

Views: 2856

Answers (5)

Ernesto Stifano
Ernesto Stifano

Reputation: 3130

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.

Upvotes: 1

Zulqarnain Jalil
Zulqarnain Jalil

Reputation: 1691

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

Upvotes: -1

JsNgian
JsNgian

Reputation: 835

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.

Upvotes: 1

Przemek Struciński
Przemek Struciński

Reputation: 5238

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

Upvotes: 1

0xc0de
0xc0de

Reputation: 8317

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>

Upvotes: 4

Related Questions