プレビュー画面などで便利!jqueryを使ってaタグを無効化する方法

サイト制作に携わっていると、画面に設置されているリンクを無効化して、間違って押してしまわないようにするという要望を聞くことがあるかもしれません。例えば、管理ツールのプレビュー表示中は、リンクを無効化しておくなどです。

この記事では、jqueryを使ってaタグを無効化する方法を紹介します。また、その応用として、特定ディレクトリを除いてaタグを無効化するプラグイン化まで実施します。

jqueryを使って、ページ全体のaタグを無効化

jqueryを使ってaタグを無効化したいときは、aタグがクリックされた時のイベントでfalseを返すだけです。例えば以下のコードにより、ページ全体のaタグが無効化されます。

$(function() {
  $("a").on("click", function() {
    return false;  // aタグを全て無効化します。
  });
});

下記ページの場合、page1.htmlpage2.htmlpage3.htmlへのリンクが全て無効化されます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8"> 
  </head>
  <body>
    <ul>
      <li><a href="page1.html">page1.html</a></li>
      <li><a href="page2.html">page2.html</a></li>
      <li><a href="page3.html">page3.html</a></li>
    </ul>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
$(function() {
  $("a").on("click", function() {
    return false;
  });
});
    </script>
  </body>
</html>

特定ディレクトリを除いてaタグを無効化

要望によっては、「リンクを無効化したいけれども、遷移先が特定のディレクトリの場合は対象外(リンクを無効化しない)」ということがあるかもしれません。その場合は、先ほどのJavaScriptのコードを改良して、特定のディレクトリに一致しないときだけfalseを返せば実現できます。

例えば、遷移先がadmin/(または/admin/)以外の場合に、aタグを無効化する場合は以下のように書くことができます。

$(function() {
  $("a").on("click", function() {
    var $atag = $(this);
    if (!/^\/?admin\//.test($atag.attr('href'))) {
      // admin以外へのリンクを全て無効化します。
      return false;
    }
  });
});

なお、コードの中の

    if (!/^\/?admin\//.test($atag.attr('href'))) {

は、hrefがadmin/、または/admin/で始まっているときのみ、if文の中に入らないとなっています。

下記ページの場合、page1.htmlpage2.htmlpage3.htmlへの遷移は無効化され、admin/page1.htmlへの遷移は可能なままになります。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8"> 
  </head>
  <body>
    <div id="preview">
      <ul>
        <li><a href="page1.html">page1.html</a></li>
        <li><a href="page2.html">page2.html</a></li>
        <li><a href="page3.html">page3.html</a></li>
        <li><a href="admin/page1.html">admin/page1.html</a></li>
      </ul>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
$(function() {
  $("a").on("click", function() {
    var $atag = $(this);
    if (!/^\/?admin\//.test($atag.attr('href'))) {
      // admin以外へのリンクを全て無効化します。
      return false;
    }
  });
});
    </script>
  </body>
</html>

プラグイン化

最後に、リンク(aタグ)を無効化するコードを使いまわせるようにプラグイン化してみます。また、プラグインを呼ぶときのオプションで、無効化しないディレクトリを指定できるようにします。

プラグインを利用する。

プラグインを利用するときは、対象のオブジェクトでdisableOutboundLinksメソッドを呼び出してあげます。

例えば、

$(function() {
  $("#preview").disableOutboundLinks({
    ignoringDirs: "admin, foo/bar"
  });
});

のように実行すれば、previewクラスで囲まれたaタグが無効化できます。ただし、遷移先がadminfoo/barディレクトリ以下の場合はリンク先に飛ぶことができます。

以下のページの場合は、page1.htmlpage2.htmlpage3.htmladmin.htmlのリンクが無効化されることになります。(※作成したプラグインは、htmlファイルと同じディレクトリjquery.disable_links.jsという名前で保存している場合です。)

<!DOCTYPE html> 
<html lang="ja">
  <head>
    <meta charset="UTF-8"> 
  </head>
  <body>
    <div id="preview">
      <ul>
        <li><a href="page1.html">page1.html</a></li>
        <li><a href="page2.html">page2.html</a></li>
        <li><a href="page3.html">page3.html</a></li>
        <li><a href="admin.html">admin.html</a></li>
        <li><a href="admin/page1.html">admin/page1.html</a></li>
        <li><a href="foo/bar/page1.html">foo/bar/page1.html</a></li>
      </ul>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="./jquery.disable_links.js"></script>
    <script>
$(function() {
  $("#preview").disableOutboundLinks({
    ignoringDirs: "admin, foo/bar"
  });
});
    </script>
  </body>
</html>

この記事が役に立った場合、シェアしていただけると励みになります!!