jQuery と Bootstrap を使用してボタンとリンクを無効または有効にする方法

jQuery とブートストラップを使用してボタンとリンクを無効/有効にする方法

ボタンとリンクを無効または有効にするプロセスを簡素化することで、ユーザー エクスペリエンスが向上し、Web アプリケーション内の制御が維持されます。 。この記事では、jQuery と Bootstrap を使用してこの機能を実現するさまざまな手法について説明します。

ボタンの無効化

HTML および Bootstrap のボタンは、ブラウザによってネイティブに処理される disabled 属性を利用することで簡単に無効にすることができます。 jQuery を使用してボタンを無効にするには、fn.extend() メソッドを使用してカスタム disable() 関数を作成できます。

さらに、jQuery の prop() メソッドを使用してボタンを無効にすることもできます。

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

アンカー タグの無効化

アンカー タグにはネイティブに無効な属性がありません。ただし、Bootstrap は CSS を使用して、.disabled クラスで無効なアンカー タグのスタイルを設定します。このクラスは、無効な外観を提供するために適用されます。

無効なアンカー タグのクリックを防ぐために、jQuery を使用できます。

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

複合無効化関数

両方を処理するにはボタンとアンカー タグを効率的に使用するには、jQuery の is() メソッドを使用して要素を区別する変更された disable() 関数を作成できます。 type:

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

この拡張 disable() 関数により、すべてのターゲット要素を一貫して処理できるようになり、ボタンとアンカー タグの両方を動的に無効または有効にできるようになります。

以上がjQuery と Bootstrap を使用してボタンとリンクを無効または有効にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。