[解決済み] ボタンやリンクを無効化・有効化する最も簡単な方法とは（jQuery + Bootstrap）

質問

私はボタンのようにスタイルされたアンカーを使うこともあれば、ボタンだけを使うこともあります。特定のクリックを無効にしたいのですが、どうすればいいですか？

• 無効になっているように見える
• クリックされなくなる

どうすればいいのでしょうか？

どのように解決するのですか？

ボタン

ボタンは、以下のように簡単に無効にすることができます。 disabled はボタンのプロパティで、ブラウザで処理されます。

<input type="submit" class="btn" value="My Input Submit" disabled/>
<input type="button" class="btn" value="My Input Button" disabled/>
<button class="btn" disabled>My Button</button>

jQueryのカスタム関数でこれらを無効化するには、単に fn.extend() :

// Disable function
jQuery.fn.extend({
    disable: function(state) {
        return this.each(function() {
            this.disabled = state;
        });
    }
});

// Disabled with:
$('input[type="submit"], input[type="button"], button').disable(true);

// Enabled with:
$('input[type="submit"], input[type="button"], button').disable(false);

JSFiddleの無効化ボタンと入力のデモ .

そうでない場合は、jQueryの prop() メソッドを使用します。

$('button').prop('disabled', true);
$('button').prop('disabled', false);

アンカータグ

注目すべきは disabled は 有効なプロパティ をアンカータグに使用することができます。このため、Bootstrapはその .btn 要素を使用します。

.btn.disabled, .btn[disabled] {
    cursor: default;
    background-image: none;
    opacity: 0.65;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    color: #333;
    background-color: #E6E6E6;
}

このように [disabled] プロパティが対象となり、さらに .disabled クラスがあります。また .disabled クラスは、アンカータグを無効に表示するために必要なものです。

<a href="http://example.com" class="btn">My Link</a>

もちろん、クリックしたときにリンクが機能するのを妨げるものではありません。上記のリンクは http://example.com . これを防ぐには、jQuery の簡単なコードを追加して、アンカータグのターゲットを disabled クラスを呼び出して event.preventDefault() :

$('body').on('click', 'a.disabled', function(event) {
    event.preventDefault();
});

をトグルすることができます。 disabled クラスを使用することで toggleClass() :

jQuery.fn.extend({
    disable: function(state) {
        return this.each(function() {
            var $this = $(this);
            $this.toggleClass('disabled', state);
        });
    }
});

// Disabled with:
$('a').disable(true);

// Enabled with:
$('a').disable(false);

JSFiddleのリンク無効化デモ .

組み合わせ

次に、上で作成した無効化関数を拡張して、無効化しようとしている要素の種類をチェックするために is() . この方法では toggleClass() でない場合は input または button 要素を使用するか、または disabled プロパティがある場合は

// Extended disable function
jQuery.fn.extend({
    disable: function(state) {
        return this.each(function() {
            var $this = $(this);
            if($this.is('input, button, textarea, select'))
              this.disabled = state;
            else
              $this.toggleClass('disabled', state);
        });
    }
});

// Disabled on all:
$('input, button, a').disable(true);

// Enabled on all:
$('input, button, a').disable(false);

JSFiddleのフルコンビネーションデモ .

さらに注目すべきは、上記の関数がすべての入力タイプで動作することです。