CODEWITHSUNDEEP
javascriptjqueryhtmlcssdisabled-control
Archana
Archana

Reputation: 241

Anchor tag when disabled, the text turns gray in IE

I am having a anchor tag whose text is turning gray when disabled. I know this the default IE treatment of anything that is disabled.

I am trying to overwrite the color of the anchor tag with the below mentioned CSS using a[disabled=""] and a[disabled="disabled"]. However both classes are not working. 

<a href="www.google.com" disabled="">Google</a>

CSS:

a:link, a:active, a:visited {
color: blue !important;
display: block;
font: bold 12px;
padding-left: 5px;
position: relative;
text-decoration: none;
width: auto;
line-height: 35px;
}

a.[disabled=""] , a[disabled="disabled"]
{
color: blue !important;
cursor: default;
}

Another method which I tried, is using a JQuery to add inline style.

if ($("a").attr('disabled', "")) {
  $("a").css({ "color": "blue" })
}

None of the above is working. Is there any solution for this?

Upvotes: 0

Views: 2853

Answers (3)

Abhitalks
Abhitalks

Reputation: 28387

As per the specs, the a element does not have a disabled attribute! It is not an element that can be disabled.

As per https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element:

interface HTMLAnchorElement : HTMLElement {
  attribute DOMString target;
  attribute DOMString download;
  [PutForwards=value] attribute DOMSettableTokenList ping;
  attribute DOMString rel;
  readonly attribute DOMTokenList relList;
  attribute DOMString hreflang;
  attribute DOMString type;

  attribute DOMString text;

  // also has obsolete members
};

And, as per https://html.spec.whatwg.org/multipage/semantics-other.html#disabled-elements:

An element is said to be actually disabled if it is one of the following:

If you find yourself trying to disable an anchor (a), you are doing it wrong.

If you really need to indicate that an a is disabled and should not respond to the interactions with it, then you may use pointer-events css property to make it so. (pointer-events property is supported by all modern browsers, but not by IE < 11)

Example Snippet:

a.disabled { 
    pointer-events: none;
    color: rgba(0,0,128,0.5);
}
<a href="#">this is a normal link</a> | <a href="#" class="disabled">this appears to be disabled</a>

##Edit:

Per your comment, if you need to support older version of IE, then you could:

  1. Use jQuery to prevent the default behaviour (e.preventDefault()), or
  2. Remove the href attribute and style such a (without href) appropriately.

The example below, shows all three options (including the one given earlier):

Example Snippet 2:

$("a.disabled").on("click", function(e) {
    e.preventDefault();
});
a.disabled { 
    pointer-events: none;
    cursor: default;
    color: rgba(0, 0, 128, 0.5);
}
a:not([href]) {
    text-decoration: underline;
    color: rgba(0, 0, 128, 0.5);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="http://example.com">this is a normal link</a> | 
<a>this is a disabled link</a> | 
<a href="http://example.com" class="disabled">this appears to be disabled</a>

Upvotes: 3

Archana
Archana

Reputation: 241

Firstly thanks to @Abhitalks for guiding on the specs. Combining his hint, I have come up with a solution for my question:

1) I am adding a class 'disabled' to the anchor element whenever I want to disable it:

$("a").addClass("disabled");

2) Since pointer-events: none; does not work for IE, I have the below snippet that can do out work across all browsers:

$("a").click(function (e) {
    e.preventDefault();
});

3) Define a class in CSS for the 'disabled' class:

a.disabled {
 color:red;
}

There you go! We are done!

P.S: Please Note! If you would like to disable the preventDefault(), below code to be used:

$("a").unbind('click');

Upvotes: 0

AndrewR
AndrewR

Reputation: 6748

Here is how you can set it, using either CSS or jQuery. Both your syntax for CSS and jQuery are incorrect.

$('a[disabled]').css('color', 'blue');
a[disabled]{color:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" disabled="disabled">Test</a>

Upvotes: 0

Related Questions