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

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

Web ページは、ユーザー インタラクションを制御し、シームレスなエクスペリエンスを提供するために不可欠です。 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() メソッド:

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

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

リンクの無効化

アンカー タグは、disabled プロパティをサポートしません。ただし、Bootstrap は、目的の無効な外観を実現するための .disabled クラスを提供します。クリックを防ぐには、event.preventDefault():

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

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

ボタンとリンク管理の組み合わせ

コードを簡素化し、両方のボタンを処理します。およびリンクでは、無効化関数を拡張できます:

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

$('input, button, a').disable(true);

この関数は要素をチェックしますリンクの .disabled やボタンやその他のフォーム要素の .disabled など、適切な無効化テクニックを入力して適用します。

これらのテクニックを実装することで、ページ上のあらゆる種類のクリック可能な要素をシームレスに無効または有効にでき、ユーザーの利便性を高めることができます。エクスペリエンスとウェブサイトの機能。

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