javascript - I can't disable an anchor with the 'disabled' property - Stack Overflow

admin管理员组

文章数量:1026989

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

Share Improve this question Follow edited Sep 3, 2019 at 13:46 isherwood 61.2k1616 gold badges122122 silver badges170170 bronze badges asked Sep 3, 2019 at 13:27 Agu FortiniAgu Fortini 9522 silver badges1212 bronze badges 3

• 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

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

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

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

Share Improve this question Follow edited Sep 3, 2019 at 13:46 isherwood 61.2k1616 gold badges122122 silver badges170170 bronze badges asked Sep 3, 2019 at 13:27 Agu FortiniAgu Fortini 9522 silver badges1212 bronze badges 3

• 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

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

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

本文标签： javascriptI can39t disable an anchor with the 39disabled39 propertyStack Overflow