Si la Balise d'Ancrage HTML Honneur les personnes Handicapées de l'Attribut?

Si je créer une balise d'ancrage HTML et définir la disabled attribut de vrai, je reçois des comportements différents dans les différents navigateurs (surprise! surprise!).

J'ai créé un violon à démontrer.

Dans IE9, le lien est en grisé et ne sont pas transférés vers le HREF emplacement.
Dans Chrome/FF/Safari, le lien est la couleur normale et transfert à l'HREF emplacement.

Quel doit être le comportement correct d'être? Est IE9 rendu de ce mal et je devrait mettre en œuvre un peu de CSS et de javascript pour le résoudre; ou est-Chrome/FF/Safari n'est pas correct et finira par rattraper?

Merci d'avance.

InformationsquelleAutor David Hoerster | 2011-08-09
  1. 13

    IE semble agir de manière incorrecte dans ce cas.

    Voir la spec HTML5

    L'IDL de l'attribut disabled s'applique uniquement aux liens de feuille de style. Lorsque l'
    lien de l'élément définit une feuille de style lien, puis les personnes handicapées de l'attribut
    se comporte comme défini pour les autres feuilles de style DOM. Pour tous les autres
    lien éléments qu'il retourne toujours faux et n'a aucun effet sur le réglage.

    http://dev.w3.org/html5/spec/Overview.html#the-link-element

    HTML4, spec ne pas mentionner même disabled

    http://www.w3.org/TR/html401/struct/links.html#h-12.2

    MODIFIER

    Je pense que le seul moyen d'obtenir cet effet de croix-navigateur est js/css comme suit:

    #link{
    text-decoration:none;
    color: #ccc;
}

    js

    $('#link').click(function(e){
    e.preventDefault();
});

    Exemple: http://jsfiddle.net/jasongennaro/QGWcn/

    • Merci pour l'explication. Le JS, tu as montré est similaire à ce que je fais pour les autres navigateurs. Il travaille aussi avec IE, donc peut-être que je vais juste aller dans leur direction.
    • Cette réponse fait référence à la mauvaise portions de la spec: dev.w3.org/html5/spec/Overview.html#the-link-element couvre <link>, pas le point d'ancrage de l'élément <a>. w3.org/html/wg/drafts/html/master/..., montre que disabled n'est pas spécifié que ce soit pour une.
    InformationsquelleAutor Jason Gennaro
  2. 13

    J'ai eu à résoudre ce problème dans un site avec beaucoup d'ancrages qui étaient en train d'être activée/désactivée avec cet attribut selon d'autres conditions, etc. Peut-être pas l'idéal, mais dans une situation comme ça, si vous préférez ne pas fixer chaque ancrage du code individuellement, cela fera l'affaire pour tous les ancres:

    $('a').each(function () {
    $(this).click(function (e) {
        if ($(this).attr('disabled')) {
            e.preventDefault();
            e.stopImmediatePropagation();
        }
    });
    var events = $._data ? $._data(this, 'events') : $(this).data('events');
    events.click.splice(0, 0, events.click.pop());
});

    Et:

    a[disabled] {
    color: gray;
    text-decoration: none;
}
    • Wow. C'est fantastique, et doit être marqué comme réponse! Comment cela at-il nulle upvotes?! J'avais commencé à réellement modifier la réponse actuelle à faire ce que vous faites, n'ayant pas d'abord lire les 0 upvote réponse! Mais pourquoi n'est-ce pas votre sélecteur css un[disabled=désactivé], et pourquoi ne pas utiliser le même sélecteur dans votre jQuery.
    • Il ne devrait pas être marqué comme réponse, car elle n'en est pas un. Vous devez exécuter ce code à chaque fois il y a des chances que le 'disabled' attribut a changé n'importe où dans le document.
    • Jaroslav, vous ne devez exécuter une fois le temps pour chaque point d'ancrage. En tout cas, je suis d'accord ce n'est pas la réponse à la question dans ce post. J'ai juste pensé qu'il pourrait être utile pour quelqu'un d'autre.
    • "un[disabled=désactivé]" ne sélectionnez <a disabled="disabled" …>, il ne sélectionnez pas <a disabled …> (ce qui est valable pour l'écriture de la disabled attribut, si elle était effectivement autorisés sur le a élément)
    InformationsquelleAutor hernant
  3. 9

    disabled est un attribut qui s'applique uniquement aux input éléments par la normes. IE peut appuyer sur a, mais vous aurez envie d'utiliser CSS/JS au lieu de cela, si vous voulez être conformes aux normes.

    • w3schools n'est pas valide normes de référence, just sayin...
    InformationsquelleAutor Karmic Coder
  4. 1

    Le JQuery réponse n'a pas fonctionné pour moi, parce que ma balise ancre sur la forme et sur mes formes, je utiliser asp champ de validateurs et elles n'étaient tout simplement pas jouer gentil. Cela m'a conduit à trouver une jolie réponse simple qui ne nécessite pas de JQuery ou CSS...

    <a id="btnSubmit" href="GoSomePlace">Display Text</a>

    Vous pouvez désactiver l'élément et il doit se comporter comme les types d'entrée ne. Pas de CSS nécessaires. Cela a fonctionné pour moi sur chrome et ff.

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

    Bien sûr, vous allez faire une boucle pour désactiver toutes les balises d'ancrage dans les DOM, mais mon exemple montre comment le faire juste pour un élément spécifique. Vous voulez vous assurer que vous obtenez le droit du client id de votre élément, mais cela a fonctionné pour moi, en plus d'une occasion. Cela permettra également de travailler sur l'asp:LinkButtons qui finissent par être balise d'ancrage des éléments lors du rendu dans le navigateur.

    InformationsquelleAutor Jabare Mitchell