web-dev-qa-db-ja.com

HTMLアンカータグは無効化された属性を尊重する必要がありますか？

HTMLアンカータグを作成し、disabled属性をtrueに設定すると、ブラウザーによって動作が異なります（サプライズ！サプライズ！）。

実演するために fiddle を作成しました。

IE9では、リンクはグレー表示され、HREFの場所に転送されません。 Chrome/FF/Safariでは、リンクは通常の色であり、HREFの場所に転送されます。

正しい動作はどうあるべきですか？ IE9はこれを正しくレンダリングしていないので、CSSとJavaScriptを実装して修正する必要があります。または、Chrome/FF/Safariは正しくなく、最終的に追いつくでしょうか？

前もって感謝します。

htmlcross-browserinternet-explorer-9
26
David Hoerster

この場合、IEは正しく動作していないようです。

HTML5仕様を見る

無効にされたIDL属性は、スタイルシートリンクにのみ適用されます。 link要素がスタイルシートリンクを定義すると、disabled属性は代替スタイルシートDOMに対して定義されたとおりに動作します。他のすべてのリンク要素では、常にfalseを返し、設定には何もしません。

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

HTML4仕様ではdisabledについても言及されていません

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

[〜＃〜]編集[〜＃〜]

この効果をクロスブラウザで得る唯一の方法は、次のようにjs/cssだと思います：

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

js

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

例： http://jsfiddle.net/jasongennaro/QGWcn/

13
Jason Gennaro

他の条件などによってこの属性で有効/無効にされているアンカーがたくさんあるサイトでこの動作を修正する必要がありました。理想的ではないかもしれませんが、そのような状況で、各アンカーのコードを修正したくない場合個別に、これはすべてのアンカーに対してトリックを実行します：

$('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());
});

そして：

a[disabled] {
    color: gray;
    text-decoration: none;
}
14
hernant

disabledは standards のinput要素にのみ適用される属性です。 IEはaでサポートする可能性がありますが、標準に準拠したい場合は、代わりにCSS/JSを使用する必要があります。

9
Karmic Coder

アンカータグがフォーム上にあり、フォーム上でaspフィールドバリデーターを使用していて、JQueryの回答がうまくいきませんでした。これにより、JQueryやCSSを必要としない非常にシンプルな答えが見つかりました...

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

要素を無効にすると、入力タイプと同じように動作します。 CSSは必要ありません。これは、chromeおよびffで機能しました。

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

もちろん、DOM内のすべてのアンカータグを無効にするループを実行しますが、私の例では、1つの特定の要素に対してそれを行う方法を示しています。要素の適切なクライアントIDを取得していることを確認したいのですが、これは私にとっては複数回成功しました。これは、ブラウザーでレンダリングしたときにアンカータグ要素になるasp：LinkBut​​tonsでも機能します。

1
Jabare Mitchell