無効なhrefタグ

そのリンクは無効になっていますが、まだクリック可能です。

<a href="/" disabled="disabled">123n</a>

無効になっている場合、クリックできないようにできますか？必ずしもJavaScriptを使用する必要がありますか？

ハイパーリンクには無効化された属性はありません。何かをリンクしたくない場合は、<a>タグを完全に削除するか、そのhref属性を削除する必要があります。

CSSを使用して、ハイパーリンクを無効にします。以下をお試しください

a.disabled {
  pointer-events: none;
  cursor: default;
}

<a href="link.html" class="disabled">Link</a>

以下を使用できます。

<a href="/" onclick="return false;">123n</a>

次のいずれかのソリューションを使用できます。

HTML

<a>link</a>

JavaScript

<a href="javascript:function() { return false; }">link</a>
<a href="/" onclick="return false;">link</a>

CSS

<a href="www.page.com" disabled="disabled">link</a>

<style type="text/css">
    a[disabled="disabled"] {
        pointer-events: none;
    }
</style>

これを試して：

<a href="javascript:void(0)" style="cursor: default;">123n</a>

<a>タグはありませんdisabledだけのためだ属性、<input>S（および<select>sおよび<textarea>複数可）。

リンクを「無効」にするには、そのhref属性を削除するか、falseを返すクリックハンドラーを追加します。

これを取り除くには、<a>タグを削除する必要があります。

または使用してみてください：-

  <a href="/" onclick="return false;">123n</a>

HTML：

<a href="/" class="btn-disabled" disabled="disabled">123n</a>

CSS：

.btn-disabled,
.btn-disabled[disabled] {
  opacity: .4;
  cursor: default !important;
  pointer-events: none;
}

ヒント1：CSSの使用 pointer-events: none;

ヒント2：JavaScriptの使用 javascript:void(0) （これはベストプラクティスです）

<a href="javascript:void(0)"></a>

ヒント1：Jqueryの使用 $('selector').attr("disabled","disabled");

CSSのみ：リンクをから削除しhrefます。

.disable { 
    pointer-events: none; 
    cursor: default; 
}

親に次のようにしpointer-events: noneて子を無効にしa-tagます（divがaをカバーし、幅/高さが0でないことが必要です）。

<div class="disabled">
   <a href="/"></a>
</div>

どこ：

.disabled {
    pointer-events: none;
}

$(document).ready(function() {
   $('a').click(function(e) {
     e.preventDefault();
  });
});

このコードを使用すると、実行時にJavaScriptを使用してリンクを無効にできます

$（ '。page-link'）。css（ "pointer-events"、 "none"）;

ポインタを削除したい場合は、カーソルを使用してcssでこれを行うことができます。

<a>タグの無効化された属性をエミュレートできます。

<a href="link.html" disabled="">Link</a>

a[disabled] {
   pointer-events: none;
   cursor: default;
}

私の場合、私は

<a href="/" onClick={e => e.preventDefault()}>

私は1つを持っている：

<a href="#">This is a disabled tag.</a>

それがあなたを助けることを願っています;）

直接無効にすることはできませんが、次のことができます

1. 追加しtype="button"ます。
2. href=""属性を削除してください。
3. disabledコースを変更することで無効になり、淡色表示になるように属性を追加します。

以下は例です

<?php
if($status=="Approved"){ 
?>
  <a type="button" class="btn btn-primary btn-xs" disabled> EDIT
     </a>
  <?php    
}else{
?>
  <a href="index.php" class="btn btn-primary btn-xs"> EDIT
    </a>
  <?php    
}
?>

ng-hrefの3項演算を使用して、目的の結果を得ることができました

<a ng-href="{{[condition] ? '' : '/'}}" ng-class="{'is-disabled':[condition]}">123n</a>

どこ

a.is-disabled{
   color: grey;
   cursor: default;

   &:hover {
      text-decoration: none;
   }
} 

ボタンとリンクを正しく使用します。

•ボタンはスクリプト機能を有効にしますは、Webページのをます（ダイアログ、領域の展開/折りたたみ）。

•リンクをクリックすると、別のページまたは同じページの別の場所に移動します。

これらのルールに従えば、リンクを無効にする必要があるシナリオはありません。リンクを視覚的に無効にしてonclickを空白にしても

<a href="" ng-click="Ctrl._isLinkActive && $ctrl.gotoMyAwesomePage()"

あなたはアクセシビリティを考慮せず、スクリーンリーダーはそれをリンクとして読み、視覚障害者はリンクが機能しない理由を不思議に思うでしょう。

WordPressを使用している場合は、何でもコーディングする方法を知らなくても、これ以上のことができるプラグインを作成しました。必要なのは、無効にするリンクのセレクターを追加し、[このセレクターを使用してすべてのリンクを新しいタブで無効にする]を選択することだけです。表示されるドロップダウンメニューから[更新]をクリックします。

これを示すgifを表示するには、ここをクリックしてください

WordPress.orgプラグインリポジトリから無料版を入手して試してみることができます。

aタグを無効にするさまざまな方法を次に示します。

<a >Link Text</a> remove the href from your anchor tag
<a href=”javascript:void(0)”/>Link text</a> put javascript:void(0) in href
<a href="/" onclick="return false;">Link text</a> using return false

アンカータグには無効な属性がないためです。jQuery関数内でアンカータグの動作を停止する場合は、関数の先頭に次の行を使用できます。

$( "a" ).click(function( e ) {
e.preventDefault();
$( "<div>" )
.append( "default " + e.type + " prevented" )
.appendTo( "#log" );
});

event.preventDefault（）

ここにはすでにたくさんの回答が掲載されているようですが、すでに述べたアプローチと私が機能することがわかったアプローチを組み合わせた明確な回答はまだありません。これは、リンクが両方とも無効になっているように見えるようにし、ユーザーを別のページにリダイレクトしないようにするためです。

この回答は、jqueryとbootstrapを使用していることを前提としhref、無効にされている間、別のプロパティを使用して一時的にプロパティを格納します。

//situation where link enable/disable should be toggled
function toggle_links(enable) {
    if (enable) {
        $('.toggle-link')
        .removeClass('disabled')
        .prop('href', $(this).attr('data-href'))
    }
    else {
        $('.toggle-link')
        .addClass('disabled')
        .prop('data-href', $(this).prop('href'))
        .prop('href','#')
    }

a.disabled {
  cursor: default;
}

マウスカーソルを合わせると、hrefタグ内のものがブラウザウィンドウの左下に表示されます。

個人的には、javascript：void（0）のようなものをユーザーに表示することは恐ろしいことだと思います。

代わりに、hrefをオフのままにして、jQuery /他のもので魔法をかけ、スタイルルールを追加します（まだリンクのように表示する必要がある場合）。

a {
    cursor:pointer;
}

最良の答えは常に最も簡単です。コーディングの必要はありません。

（a）アンカータグにhref属性がない場合、それはハイパーリンクのプレースホルダーにすぎません。すべてのブラウザでサポートされています！

<a href="/">free web counters</a><br  />
<a "/">free web counters</a>

falseを返すことでアンカータグを無効にできます。私の場合、Jqueryアコーディオンに角度とng-disabledを使用しているため、セクションを無効にする必要があります。

そこで、これを修正するための小さなjsスニペットを作成しました。

       <a class="opener" data-toggle="collapse"
                   data-parent="#shipping-detail"
                   id="shipping-detail-section"
                   href="#shipping-address"
                   aria-expanded="true"
                   ng-disabled="checkoutState.addressSec">
                   Shipping Address</a>
     <script>
          $("a.opener").on("click", function () {
           var disabled = $(this).attr("disabled");
           if (disabled === 'disabled') {
            return false;
           }
           });
     </script>

リンクを一時的に無効にしたいが、後で有効にするためにそこにhrefを残す場合（これは私がしたかったことです）、すべてのブラウザーが最初のhrefを使用することがわかりました。したがって、私は行うことができました：

<a class="ea-link" href="javascript:void(0)" href="/export/">Export</a>

私に合うバリエーション：

<script>
  function locker(){
    if ($("a").hasClass("locked")) {
         $("a").removeClass('locked').addClass('unlocked');
         $("a").attr("onClick","return false");
    } else {
         $("a").css("onclick","true");
         $("a").removeClass('unlocked').addClass('locked');
         $("a").attr("onClick","");
    }
  }
</script>

<button onclick="locker()">unlock</button>

<a href="http://some.site.com" class="locked">
  <div> 
      .... 
  <div>
</a>

<a href="/" disabled="true" onclick="return false">123</a>

ただ追加：これは一般的に機能しますが、ユーザーがブラウザでJavaScriptを無効にしている場合は機能しません。

1）bootstrap 3プラグインを統合した後、オプションでアンカータグでBootstrap 3クラスを使用してhrefタグを無効にすることができます

<a href="/" class="btn btn-primary disabled">123n</a>

または

2）ブラウザーでhtmlまたはjsを使用してJavaScriptを有効にする方法を学びます。または、Webサイトを使用する前にJavaScriptを有効にするようにユーザーに指示するポップアップを作成する