jQueryでaタグの特定リンクのみ有効化する方法

放置してた技術ブログを少しずつ再開しないとなと思っていたところ、jQueryではまったところが出てきたのでメモ更新。

プレビュー画面のようなものを作っている時、プレビューの機能的には見た目のみの確認で、リンク先に遷移させると機能的によろしくないときはHTMLのリンクaタグを無効化したい。それはjQueryで以下のように簡単に制御できる。

  $(function(){
      $('a').click(function(){
          return false;
      })
  });

これはaタグすべてが無効化になるが、一部有効化しておきたい場合がある。その場合は、aタグ内にclassを設定し、そのクラスの有無で条件分岐すればよいらしい。

<a href="../sample.html" class="enable">

有効化したいaタグに class="enable" を追加。
特定クラスの有無の分岐はhasClassメソッドを使う。

  $(function(){
      $("a").click(function(e){
          if($(e.target).hasClass("enable")) {
              return true;
          } else {
              return false;
          }
      });
  });

これでclass="enable"を持つリンクのみ有効化され、それ以外の普通のaタグはすべてリンクが無効化になる。

また、特定リンクのみ無効化する方法は、例えばaタグ内にclass="disable"を設定し、hasClassを使わずに以下の書き方でできる。

  $(function(){
      $('a.disable').click(function(){
          return false;
      })
  });

特定リンクのみ無効化する方法についてはググるとたくさんでてくるけど、全体のリンクを無効化しつつ、一部有効化する方法がググってもあまり見当たらなかったので、調べつつ試行錯誤してなんとかできた。

他にもLaravelネタで更新することはあるけど、結局面倒で後回しになってる・・・。
本当は週1くらいで更新していきたいところなのだけど。土日どちらか1回は更新目標にしよう。