Chrome / WebKit / Safariでアンカーを無効にします

Question

次のコードを検討してください：

$("a").attr("disabled", "disabled");

IEおよびFFでは、これによりアンカーはクリック不可になりますが、WebKitベースのブラウザー（Google ChromeおよびSafari）では何もしません。 disabled属性の良いところは、簡単に削除でき、href属性とonclick属性に影響しないことです。

希望する結果を得るための提案はありますか。回答は次のとおりです。

• AJAX呼び出しの実行中にフォーム入力コントロールを無効にしたいので、簡単に元に戻すことができます。
• IE、FF、およびWebKitで動作する必要があります

Answer 1

これらのアンカー要素にバインドされたonclickイベントハンドラがあると仮定します。イベントハンドラに「無効」をチェックさせるだけです。属性を設定し、設定されている場合はイベントをキャンセルします。イベントハンドラは次のようになります。

$("a").click(function(event){
  if (this.disabled) {
    event.preventDefault();
  } else {
    // make your AJAX call or whatever else you want
  }
});

スタイルシートルールを設定してカーソルを変更することもできます。

a[disabled=disabled] { cursor: wait; }

編集-「無効」を簡素化コメントで提案されているように確認してください。

Answer 2

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

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