Chrome / WebKit / Safariでアンカーを無効にします
-
05-07-2019 - |
質問
次のコードを検討してください:
$("a").attr("disabled", "disabled");
IEおよびFFでは、これによりアンカーはクリック不可になりますが、WebKitベースのブラウザー(Google ChromeおよびSafari)では何もしません。 disabled属性の良いところは、簡単に削除でき、href属性とonclick属性に影響しないことです。
希望する結果を得るための提案はありますか。回答は次のとおりです。
- AJAX呼び出しの実行中にフォーム入力コントロールを無効にしたいので、簡単に元に戻すことができます。
- IE、FF、およびWebKitで動作する必要があります
解決
これらのアンカー要素にバインドされた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; }
編集-「無効」を簡素化コメントで提案されているように確認してください。
他のヒント
他の条件などに応じてこの属性で有効/無効にされたアンカーの多いサイトでこの動作を修正する必要がありました。理想的ではないかもしれませんが、修正しない場合各アンカーのコードを個別に、これはすべてのアンカーに対してトリックを行います:
$('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;
}
所属していません StackOverflow