jQuery とブートストラップを使用してボタンとリンクを無効または有効にするにはどうすればよいですか?

jQuery とブートストラップを使用したボタンとリンクの無効化と有効化

場合によっては、特定のボタンやリンクがクリックされないようにして、無効な外観を与える必要があります。 jQuery と Bootstrap を使用してこれを実現する方法は次のとおりです。

ボタン

HTML のボタンには組み込みの「disabled」属性があり、簡単に無効にすることができます。

<button class="btn" disabled>Disabled Button</button>

カスタム jQuery 関数でボタンを無効にするには、disable() で機能を拡張します。メソッド:

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

$('button').disable(true); // Disable buttons
$('button').disable(false); // Enable buttons

アンカー タグ

無効は、アンカー タグ () の有効な属性ではありません。代わりに、Bootstrap は .btn.disabled クラスを使用して要素をスタイル設定し、要素が無効に見えるようにします。

<a href="#" class="btn disabled">Disabled Link</a>

無効時にリンクが機能しないようにするには、jQuery を使用してクリックをインターセプトします。

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

組み合わせたアプローチ

disable() 関数を拡張して、入力、ボタン、およびlinks:

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);
        });
    }
});

これにより、1 行のコードですべてのクリック可能な要素を無効にすることができます:

$('input, button, a').disable(true); // Disable all clickable elements
$('input, button, a').disable(false); // Enable all clickable elements

以上がjQuery とブートストラップを使用してボタンとリンクを無効または有効にするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。