web-dev-qa-db-ja.com

jquery /ブートストラップ無効化ボタン

ちょっとivは、JQueryを使用するか、Twitter bootstrapクラスを変更して、ボタンがそのonclickアクションを実行する（別名、無効にする）ことを防ぐ）ことで解決策を探していました。ほとんどが無効になっているように見えますが、それでも正しく機能します。

$("#previous").prop('disabled', true);
$("#next").prop('disabled', true);

目的は、タブインデックスが高すぎるか低すぎる場合にタブを交換しないようにすることです。他のほとんどのソリューションには、比較的単純に見える機能には不要に見えるJavaScriptが大量に含まれているようです。

このような：

$("#previous").click(function() {
  var me = $(this);
  me.unbind( "click");            
})

これはバインドされた関数を削除することになっていますが、タブインデックスが増加したときにイベントを再アタッチすることも意味します。イベントを削除したりボタン要素を表示しないでボタンを一時的に無効にしたり、デフォルトのアクションが実行されないようにするためのより簡単な解決策はありますか？

どんな助けでもいただければ幸いです:)

javascriptjqueryhtmltwitter-bootstraptwitter-bootstrap-3
9
D3181

Twitterを使用している場合bootstrapこの動作は、すでに実装されています。

無効にする要素のクラス.disabledを変更するだけです。

お気に入り：

$("#previous").addClass('disabled');
14
Erick Gallani

簡単な例を示しましょう。ここでは、クリックするとボタンが無効になります。

<button class="btn btn-danger">Click Me</button>

$('.btn-danger').on('click', function() {

    if ($(this).hasClass('disabled')) {
        return false;
    } else {
        $(this).addClass('disabled');
    }
});
5
Object Manipulator

これが私の解決策です：

Javascript

jQuery.fn.extend( {

    bsButtonSetStatus : function( status ) {
        if ( status ) {
            this.removeClass( 'disabled' );
        } else {
            this.addClass( 'disabled' );
        }
    },

} );

[〜＃〜] css [〜＃〜]

.btn.disabled,
.btn:disabled {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
    opacity: 0.25;
    pointer-events: none;
}
0
Antonio Petricca

event.preventDefault()を使用してデフォルトのアクションを防止する必要があります

$("#previous").click(function(event) {
  //add logic to attach style behavior here or conditionally prevent default
      event.preventDefault();    
});
0
Shintu Joseph