ホームページ > ウェブフロントエンド > CSSチュートリアル > jQuery とブートストラップを使用してボタンとリンクを無効または有効にするにはどうすればよいですか?

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

Susan Sarandon
リリース: 2024-12-12 22:14:14
オリジナル
224 人が閲覧しました

How Can I Disable and Enable Buttons and Links Using jQuery and Bootstrap?

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート