Disabling the button of an anchor tag

Question

I have a button inside the anchor tag(defined it using class).

<a id="moreButton" class="contactButtonSmall" style="position:absolute; left:225px; top:165px;  FONT-WEIGHT:normal; FONT-SIZE:11pt;" onclick="doSomething();">More</a>

Now I want to disable it.So I have used the following code to disable the anchor tag.

moreButton.disabled = true;

The anchor tag is not working after disabling it , but the button of anchor still looks as if it is not disabled ie not grayed out. Is there any way to disable the button? Please let me know if you need any additional information.

Answer 1

As others have said, inline CSS is bad practice so you should export your style code to a separate CSS file, as so:

.contactButtonSmall {
  position:absolute;
  left:225px;
  top:165px; 
  font-weight:normal;
  font-size:11pt;
}

Then you can use the :disabled selector to change the appearance of the button when it is disabled:

.contactButtonSmall:disabled {
  /* Styling for disabled button */
}

Answer 2

The best way to disable an anchor tag is to give it the correct pointer-events property. Here's a simple example how to disable the anchor tag with one simple CSS line:

 a { pointer-events: none; } 

 <a href="https://google.com">I am a disabled anchor tag</a> 

Answer 3

I have used button along with the style attributes

background-color: Transparent;
    border: none;

instead of anchor tag to fix the issue. The style attributes helped to remove the grayed out area of the original html button and to keep my own image for the button.

example code is given below:

<button> id="moreButton" class="contactButtonSmall" style="position:absolute; left:225px; top:165px;  FONT-WEIGHT:normal; FONT-SIZE:11pt; background-color: Transparent;border: none;" onclick="doSomething();">More</button>

In CSS file:

.contactButtonSmall {
    position:relative;
    display: block; /* 'convert' <a> to <div> */
    width: 60px;
    max-height: 20px;
    padding-top: 2px;
    padding-bottom: 2px;
    background-position: center top;
    background-repeat: no-repeat;
    background-image: url(../contactImages/blankSmallButton.gif);
    text-decoration: none;
    text-align: center;
    cursor:pointer;
    background-color: Transparent;
    border: none;
}

Answer 4

You can use a mixture of CSS and JS to accomplish this:

HTML:

<a href="/" id="myLink">
    click me!
</a>

CSS:

#myLink {
    background: red
}

a#myLink.disabledLink {
    background: grey;
    cursor: not-allowed;
}

JS:

document.getElementById("myLink").onclick = function(e)
{
    e.preventDefault();
    this.className += " disabledLink";
}

jsfiddle here

this on click prevents the default action of the anchor tag and assigns it a class. The class has css that makes the cursor show the now-allowed icon as well as changing background colour to grey.