の中にリンクボタンがあり、<td>無効にする必要があります。これはIEでは機能しますが、FirefoxとChromeでは機能しません。構造は-内のリンク<td>です。<td>（div / spanのような）コンテナを追加できません
私は次のすべてを試しましたが、Firefoxでは動作しませんでした（1.4.2 jsを使用）：
$(td).children().each(function () {
$(this).attr('disabled', 'disabled');
});
$(td).children().attr('disabled', 'disabled');
$(td).children().attr('disabled', true);
$(td).children().attr('disabled', 'true');
注-アンカータグは動的に登録されているため、クリック機能の登録を解除できません。そして、私は無効モードでリンクを表示する必要があります。
リンクを無効にすることはできません（ポータブルな方法で）。これらの手法の1つを使用できます（それぞれに独自の長所と短所があります）。
これは、ほとんどのブラウザがサポートするときに行う正しい方法です（ただし、後で参照してください）。
a.disabled {
pointer-events: none;
}
これは、たとえば、Bootstrap3.xが行うことです。現在（2016年）、Chrome、FireFox、Opera（19+）でのみ十分にサポートされています。Internet Explorerはバージョン11からこれをサポートし始めましたが、リンクはサポートしていませんが、次のような外部要素で利用できます。
span.disable-links {
pointer-events: none;
}
と：
<span class="disable-links"><a href="#">...</a></span>
おそらく、CSSクラスを定義する必要がありますが、CSSクラスの代わりに属性を再利用 するとpointer-events: noneどうなるでしょうか。厳密に言えば、はサポートされていませんが、ブラウザは不明な属性について文句を言うことはありません。属性IEを使用すると無視されますが、IE固有の属性は尊重されます。他のCSS準拠のブラウザは、不明な属性を無視して尊重します。説明するよりも書く方が簡単です。disableddisabled<a>disabledpointer-eventsdisabled disabledpointer-events
a[disabled] {
pointer-events: none;
}
IE 11のもう1つのオプションはdisplay、リンク要素のセットをblockまたはに設定することinline-blockです。
<a style="pointer-events: none; display: inline-block;" href="#">...</a>
IEをサポートする必要がある場合（そしてHTMLを変更できる場合）、これは移植可能なソリューションである可能性があることに注意してください...
pointer-eventsこれはすべて、ポインタイベントのみを無効にすることに注意してください。リンクは引き続きキーボードを介してナビゲートできるため、ここで説明する他の手法の1つを適用する必要もあります。
上記のCSS手法と組み合わせてtabindex、要素がフォーカスされるのを防ぐために非標準的な方法で使用できます。
<a href="#" disabled tabindex="-1">...</a>
私は多くのブラウザとの互換性をチェックしたことがないので、これを使用する前に自分でテストすることをお勧めします。JavaScriptなしで動作するという利点があります。残念ながら（しかし明らかに）tabindexCSSから変更することはできません。
JavaScript関数にaを使用hrefし、条件（または無効な属性自体）を確認し、万が一の場合は何もしません。
$("td > a").on("click", function(event){
if ($(this).is("[disabled]")) {
event.preventDefault();
}
});
リンクを無効にするには、次のようにします。
$("td > a").attr("disabled", "disabled");
それらを再度有効にするには：
$("td > a").removeAttr("disabled");
代わりに.is("[disabled]")使用したい場合は（属性が設定されていない場合.attr("disabled") != undefinedは常にjQuery 1.6+が返されます）、はるかに明確です（このヒントを提供してくれたDave Stewartに感謝します）。ここで私は非標準的な方法で属性を使用していることに注意してください。これが気になる場合は、属性をクラスに置き換え、に置き換えてください（ andの追加と削除）。undefinedis()disabled.is("[disabled]").hasClass("disabled")addClass()removeClass()
ZoltánTamásiはコメントで、「クリックイベントがすでに何らかの「実際の」関数にバインドされている場合があります（たとえば、knockoutjsを使用）。その場合、イベントハンドラーの順序付けによって問題が発生する可能性があります。したがって、リターンをバインドして無効なリンクを実装しました。リンクのtouchstart、mousedownおよびイベントへの誤ったハンドラーkeydown。いくつかの欠点があります（リンクでタッチスクロールが開始されないようにします）」が、キーボードイベントを処理することには、キーボードナビゲーションを防ぐという利点もあります。
hrefクリアされていない場合、ユーザーが手動でそのページにアクセスする可能性があることに注意してください。
属性をクリアしhrefます。このコードでは、イベントハンドラーを追加しませんが、リンク自体を変更します。リンクを無効にするには、次のコードを使用します。
$("td > a").each(function() {
this.data("href", this.attr("href"))
.attr("href", "javascript:void(0)")
.attr("disabled", "disabled");
});
そしてこれはそれらを再び有効にするためのものです：
$("td > a").each(function() {
this.attr("href", this.data("href")).removeAttr("disabled");
});
個人的には、このソリューションはあまり好きではありませんが（無効なリンクでこれ以上行う必要がない場合）、リンクをたどるさまざまな方法があるため、互換性が高くなる可能性があります。
リンクがたどられないonclick関数を追加/削除します。return falseリンクを無効にするには：
$("td > a").attr("disabled", "disabled").on("click", function() {
return false;
});
それらを再度有効にするには：
$("td > a").removeAttr("disabled").off("click");
最初のソリューションではなく、このソリューションを好む理由はないと思います。
disabled次のCSSルールを使用できるように、属性を追加したリンクを無効にするために使用しているソリューションが何であれ、スタイリングはさらに簡単です。
a[disabled] {
color: gray;
}
属性の代わりにクラスを使用している場合：
a.disabled {
color: gray;
}
UIフレームワークを使用している場合、無効になっているリンクのスタイルが適切に設定されていないことがあります。たとえば、Bootstrap 3.xはこのシナリオを処理し、ボタンはdisabled属性と.disabledクラスの両方で正しくスタイル設定されます。代わりに、リンクをクリアしている場合（または他のJavaScript手法のいずれかを使用している場合）、<a>なしhrefはまだ有効としてペイントされているため、スタイリングも処理する必要があります。
属性/クラスaria-disabled="true"と一緒に属性も含めることを忘れないでください。disabled
cssで修正を取得しました。
td.disabledAnchor a{
pointer-events: none !important;
cursor: default;
color:Gray;
}
上記のcssをアンカータグに適用すると、クリックイベントが無効になります。
詳細については、このリンクをチェックアウトしてください
ソリューションを投稿してくれたすべての人（特に@AdrianoRepetti）のおかげで、私は複数のアプローチを組み合わせて、より高度なdisabled機能を提供しました（そしてそれはクロスブラウザーで動作します）。コードは以下のとおりです（ES2015とコーヒースクリプトの両方が好みに応じて異なります）。
これにより、複数のレベルの防御が提供されるため、無効としてマークされたアンカーは実際にそのように動作します。このアプローチを使用すると、次のことができないアンカーを取得できます。
これは防御の最前線であるため、このcssを含めます。これは、使用するセレクターがa.disabled
a.disabled {
pointer-events: none;
cursor: default;
}
次に、このクラスを準備完了時にインスタンス化します（オプションのセレクターを使用）。
new AnchorDisabler()
npm install -S key.js
import {Key, Keycodes} from 'key.js'
export default class AnchorDisabler {
constructor (config = { selector: 'a.disabled' }) {
this.config = config
$(this.config.selector)
.click((ev) => this.onClick(ev))
.keyup((ev) => this.onKeyup(ev))
.focus((ev) => this.onFocus(ev))
}
isStillDisabled (ev) {
// since disabled can be a class or an attribute, and it can be dynamically removed, always recheck on a watched event
let target = $(ev.target)
if (target.hasClass('disabled') || target.prop('disabled') == 'disabled') {
return true
}
else {
return false
}
}
onFocus (ev) {
// if an attempt is made to focus on a disabled element, just move it along to the next focusable one.
if (!this.isStillDisabled(ev)) {
return
}
let focusables = $(':focusable')
if (!focusables) {
return
}
let current = focusables.index(ev.target)
let next = null
if (focusables.eq(current + 1).length) {
next = focusables.eq(current + 1)
} else {
next = focusables.eq(0)
}
if (next) {
next.focus()
}
}
onClick (ev) {
// disabled could be dynamically removed
if (!this.isStillDisabled(ev)) {
return
}
ev.preventDefault()
return false
}
onKeyup (ev) {
// We are only interested in disabling Enter so get out fast
if (Key.isNot(ev, Keycodes.ENTER)) {
return
}
// disabled could be dynamically removed
if (!this.isStillDisabled(ev)) {
return
}
ev.preventDefault()
return false
}
}
class AnchorDisabler
constructor: (selector = 'a.disabled') ->
$(selector).click(@onClick).keyup(@onKeyup).focus(@onFocus)
isStillDisabled: (ev) =>
### since disabled can be a class or an attribute, and it can be dynamically removed, always recheck on a watched event ###
target = $(ev.target)
return true if target.hasClass('disabled')
return true if target.attr('disabled') is 'disabled'
return false
onFocus: (ev) =>
### if an attempt is made to focus on a disabled element, just move it along to the next focusable one. ###
return unless @isStillDisabled(ev)
focusables = $(':focusable')
return unless focusables
current = focusables.index(ev.target)
next = (if focusables.eq(current + 1).length then focusables.eq(current + 1) else focusables.eq(0))
next.focus() if next
onClick: (ev) =>
# disabled could be dynamically removed
return unless @isStillDisabled(ev)
ev.preventDefault()
return false
onKeyup: (ev) =>
# 13 is the js key code for Enter, we are only interested in disabling that so get out fast
code = ev.keyCode or ev.which
return unless code is 13
# disabled could be dynamically removed
return unless @isStillDisabled(ev)
ev.preventDefault()
return false
要素を試してください：
$(td).find('a').attr('disabled', 'disabled');
リンクを無効にすると、Chromeで機能します：http：//jsfiddle.net/KeesCBakker/LGYpz/。
Firefoxはうまく機能していないようです。この例は機能します：
<a id="a1" href="http://www.google.com">Google 1</a>
<a id="a2" href="http://www.google.com">Google 2</a>
$('#a1').attr('disabled', 'disabled');
$(document).on('click', 'a', function(e) {
if ($(this).attr('disabled') == 'disabled') {
e.preventDefault();
}
});
注：将来の無効/有効リンク用の「ライブ」ステートメントを追加しました。
注2：「ライブ」を「オン」に変更しました。
Bootstrap 4.1は、名前付きのクラスdisabledとaria-disabled="true"属性を提供します。
例"
<a href="#"
class="btn btn-primary btn-lg disabled"
tabindex="-1"
role="button" aria-disabled="true"
>
Primary link
</a>
したがって、動的に作成したい場合you don't want to care if it is button or ancor、JSスクリプトよりも、そのようなものが必要です。
let $btn=$('.myClass');
$btn.attr('disabled', true);
if ($btn[0].tagName == 'A'){
$btn.off();
$btn.addClass('disabled');
$btn.attr('aria-disabled', true);
}
ただし、注意してください
このソリューションは、クラスとのリンクでのみ機能しますbtn btn-link。
card-linkブートストラップがクラスの使用を推奨する場合があります。この場合、ソリューションは機能しません。
私は以下の解決策に行き着きました。これは、属性、、、<a href="..." disabled="disabled">またはクラスのいずれかで機能し<a href="..." class="disabled">ます。
CSSスタイル：
a[disabled=disabled], a.disabled {
color: gray;
cursor: default;
}
a[disabled=disabled]:hover, a.disabled:hover {
text-decoration: none;
}
Javascript（jQuery対応）：
$("a[disabled], a.disabled").on("click", function(e){
var $this = $(this);
if ($this.is("[disabled=disabled]") || $this.hasClass("disabled"))
e.preventDefault();
})
cssプロパティを追加するだけです。
<style>
a {
pointer-events: none;
}
</style>
そうすることで、アンカータグを無効にすることができます。
以下に示すように、HTMLリンクを無効にすることができます。
<style>
.disabled-link {
pointer-events: none;
}
</style>
<a href="https://google.com" class="disabled-link">Google.com</a>
インラインJavaScriptを使用できます。
<a href="javascript:void(0)">Google.com</a>
リンクを無効にすることはできません。クリックイベントを発生させたくない場合は、単にRemoveそのactionリンクから。
$(td).find('a').attr('href', '');
詳細情報：- 無効にできる要素
私は次のようなことをします
$('td').find('a').each(function(){
$(this).addClass('disabled-link');
});
$('.disabled-link').on('click', false);
このようなものが機能するはずです。無効にしたいリンクのクラスを追加し、誰かがそれらをクリックするとfalseを返します。それらを有効にするには、クラスを削除するだけです。
タッチデバイスの別のページにアクセスするためのリンクを無効にするには：
if (control == false)
document.getElementById('id_link').setAttribute('href', '#');
else
document.getElementById('id_link').setAttribute('href', 'page/link.html');
end if;
Razor（.cshtml）では、次のことができます。
@{
var isDisabled = true;
}
<a href="@(isDisabled ? "#" : @Url.Action("Index", "Home"))" @(isDisabled ? "disabled=disabled" : "") class="btn btn-default btn-lg btn-block">Home</a>
リンクをボタンに変えて、「disabled」属性を使用することをお勧めします。この問題を確認して、リンクをボタンに変換する方法を確認できます。リンクのように機能するHTMLボタンを作成する方法
これを使用して、asp.netのハイパーリンクまたはhtmlのリンクボタンを無効にすることができます。
$("td > a").attr("disabled", "disabled").on("click", function() {
return false;
});
もう1つの可能な方法があり、私が最も好きな方法があります。基本的には、ライトボックスがdivを配置し、z-indexをいじることによって、ページ全体を無効にするのと同じ方法です。これが私のプロジェクトからの関連するスニペットです。これはすべてのブラウザで機能します!!!!!
Javascript（jQuery）：
var windowResizer = function(){
var offset = $('#back').offset();
var buttontop = offset.top;
var buttonleft = offset.left;
$('#backdisabler').css({'top':buttontop,'left':buttonleft,'visibility':'visible'});
offset = $('#next').offset();
buttontop = offset.top;
buttonleft = offset.left;
$('#nextdisabler').css({'top':buttontop,'left':buttonleft,'visibility':'visible'});
}
$(document).ready(function() {
$(window).resize(function() {
setTimeout(function() {
windowResizer();
}, 5); //when the maximize/restore buttons are pressed, we have to wait or it will fire to fast
});
});
とhtmlで
<a href="" id="back" style="float: left"><img src="images/icons/back.png" style="height: 50px; width: 50px" /></a>
<a href="" id="next" style="float: right"><img src="images/icons/next.png" style="height: 50px; width: 50px" /></a>
<img id="backdisabler" src="images/icons/disabled.png" style="visibility: hidden; position: absolute; padding: 5px; height: 62px; width: 62px; z-index: 9000"/>
<img id="nextdisabler" src="images/icons/disabled.png" style="visibility: hidden; position: absolute; padding: 5px; height: 62px; width: 62px; z-index: 9000"/>
したがって、リサイザーはアンカー（画像は単なる矢印）の位置を見つけて、ディセーブルを上に配置します。無効化機能の画像は半透明の灰色の正方形（リンクに一致するようにHTML内の無効化機能の幅/高さを変更）であり、無効になっていることを示しています。フローティングを使用すると、ページのサイズを動的に変更でき、無効化機能はwindowResizer（）で追随します。あなたはグーグルを通して適切な画像を見つけることができます。簡単にするために、関連するcssをインラインに配置しました。
その後、いくつかの条件に基づいて、
$('#backdisabler').css({'visibility':'hidden'});
$('#nextdisabler').css({'visibility':'visible'});
これらの多くは考えすぎだと思います。のように、必要なクラスを追加しますdisabled_link。
次に、cssに.disabled_link { display: none }
Boomを設定します。これで、ユーザーはリンクを見ることができなくなり、クリックすることを心配する必要がなくなります。リンクをクリック可能にするために何かを行う場合は、jQueryを使用してクラスを削除するだけです$("a.disabled_link").removeClass("super_disabled")。ブームが終わりました！