Is 'disabled' a valid attribute for an anchor tag

Question

If I have the following simple code segment:

    click me
    &         


        
                      

              相关标签:
       
      

Answer 1

Removing the href or setting it to '#' when you actually want to disable it is kind of a pain if the anchor is to be enabled later, because you need to reset the href to whatever value it should link to. Instead, I just add a disable attribute to the tag and a click event handler and some css. This way the anchor can easily be seen to be disabled, but if enabled where it would go.

Yes, disabled isn't supported attribute by the anchor tab, but the CSS attribute selector does find it and so does jQuery's. So, while the following solution is a mixed jQuery/javaScipt/CSS, it does provide a somewhat nicer way to disable/enable anchors, which supports dynamically adding/removing the disabled attribute to/from the tag with javaScript. Note that this has only been tested and found to work in Chrome.

<style>
  a:disabled,               /* This doesn't do anything, but hopefully one day ... */
  a[disabled]               /* This activates when the disabled attribute is added. */
    {
      cursor: not-allowed;  /* Indicate that the link is not to be click! */
    }
</style>

<script>
  // Use the same css selectors to find all of the disabled anchors ...

  $( 'a:disabled, a[disabled]' )
  .click( function( event ) {

            //
            // Prevent disabled anchors from doing their click action ...
            //
            // Need to recheck that the anchor is still disabled, because the
            // jQuery that initially found this anchor and set this event
            // handler doesn't affect the anchor after the event is set.
            //

            // Is this anchor still disabled?

            if( this.hasAttribute( 'disabled' ) ) {

              event.preventDefault();

            }

          } );
</script>

Here is a codePen demo: https://codepen.io/howardb1/pen/XWrEKzP

Answer 2

Disabled is not a valid attribute for the anchor tag. Source : http://dev.w3.org/html5/html-author/#the-a-element

Answer 3

no it doesnt work with the a tag you can use the jquery event.preventDefault() referance here

Answer 4

The button is an input type, that's why disable works. Anchors don't work the same. Try giving your a tag an id and disabling using javascript.

<div ng-app="myApp">
<a id="someid" ng-click="value1=123" >click me</a>
<button ng-disabled='true' ng-click="value2=123">click me</button>
=={{value1}}==
=={{value2}}==</div>

After that can disable the element using js and it should behave as input types do.

function DisableButton() {
    var submitButton = document.getElementById("someid");
    if (submitButton != null) {
        submitButton.setAttribute('disabled', 'disabled');
    }
}

Make sure you're getting the right client id of your element.

Answer 5

If you don't want to use javascript to disable the anchor (as pruposed in other responses) you can just omit the hrefattribute and the anchor wont work and will even change it's styling.

<a>A disabled anchor</a>

Note: I know my answer doesn't directly talk about the disable attribute but the info might still be useful for the audiance, as it was for me.

Answer 6

Read w3c Link and the-a-element

disable is not valid with anchor tags

instead you can do it by event.preventDefault()

$('a').click(function(event){
   event.preventDefault();
});