aタグのlinkを無効に。

リンクをjQueryで動的に無効にしたい。

例えば、２つのボタンがあって片方を押されたらもう片一方を無効にする。
もう一回押されたら無効を解除する。みたいな仕様のとき

btn1(off) btn2(off)

↓ btn1をclick

btn1(on) btn2(diabled)

↓ btn1をclick

btn1(off) btn2(off)

このような仕様をcssとjQueryでさくっと作る。

方針

押されたボタンにbtn-onクラス
無効になったボタンにbtn-disabledクラス
をjQueryで追加する。(クラス名はbootstrapなど利用するライブラリと被らないように。)

HTML

単純に、aタグボタンを２つ。
idをつけておく

btn.html

<a href="javascript:void(0)" id="btn1" class="btn">btn1</a>
<a href="javascript:void(0)" id="btn2" class="btn">btn2</a>

CSS

disabled(押せない状態)のリンクに以下のcssを適用する。

btn.css

.btn {
  /* 適当にボタンっぽいレイアウトにする。 */
}

.btn-on {
  color: #f00; /* わかりやすく色を赤に。 */
}

.btn-disabled {
  pointer-events: none; /* aタグのリンクを無効にする */
  cursor: default;  /* マウスオーバー時のカーソルをdefaultに固定 */
  text-decoration: none;  /* 下線等を消す。 */
}

jQuery

押されたボタンともう片方のボタンをjQueryオブジェクトで取得して,classをadd, removeする。
また、btn1が押された状態なのかbtn2が押された状態なのか、どちらも押されていない状態なのか状態を持っていないといけないので,,,今回はクロージャで実現する。
なにも押されていない状態をstate = 0, 何か押されている状態をstate = 1とする。

idをbtn1, btn2とすると

btn.js

$(function() {
  var state = 0;
  var button_ids = ['btn1', 'btn2']
  var btn_change = function() {
    var clicked_id = $(this).attr('id');
    var clicked = $('#' + clicked_id);
    console.log(button_ids);

    // clickされたボタン以外を取り出す
    disabled_buttons = button_ids.filter(function(v){
      return v != clicked_id;
    });

    console.log(disabled_buttons);
    var another = $('#' + disabled_buttons[0]); /*   複数ボタンがある場合はforなどですべてのボタンを取得*/
    if (state == 0) {
      clicked.addClass('btn-on');
      another.addClass('btn-disabled');
      state = 1;
    } else if (state == 1) {
      clicked.removeClass('btn-on');
      another.removeClass('btn-disabled');
      state = 0;
    }
  }
  $('#btn1').on('click', btn_change);
  $('#btn2').on('click', btn_change);
});

---

以上で一応動的にボタンの管理ができるはず。
ボタンが複数ある場合や、サーバー側でボタンの管理をしたい場合はボタンの状態管理を工夫する。