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

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

問題を理解する

場合によっては、ユーザーが特定のボタンやリンクを操作できないようにしたい場合。これには、無効な状態を視覚的に示すことと、クリック イベントを防止することの両方が含まれます。

ボタンのソリューション

無効なプロパティを操作してボタンをシームレスに無効にします:

<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 無効化関数の場合:

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

無効化: $('input[type="submit"], input[type="button"], button').disable(true);
有効: $('input[type="submit"], input[type ="button"], button').disable(false);

アンカー タグの解決策(リンク)

アンカー タグには無効なプロパティがありませんが、Bootstrap はこれを CSS スタイルで処理します。さらに、無効時にリンクが機能しないように jQuery を組み込むことができます:

.btn.disabled, .btn[disabled] {
    cursor: default;
    opacity: 0.65;
    color: #333;
    background-color: #E6E6E6;
}

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

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

Disable: $('a').disable(true);
Enable: $( 'a').disable(false);

結合解決策

上記のアプローチを組み合わせると、無効化関数を拡張して要素タイプをチェックし、それに応じて無効化を処理できます。

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);
すべてを有効にする: $('input, button, a').disable(false);

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