web-dev-qa-db-ja.com

ボタンやリンクを無効/有効にする最も簡単な方法は何ですか（jQuery + Bootstrap）

時々私はボタンとしてスタイル付けされたアンカーを使いますそして時々私はただボタンを使います。私は特定のclicky-thingsを無効にしたいので。

  • 彼らは無効に見えます
  • クリックされなくなります

これどうやってするの？

jqueryhtmlcsstwitter-bootstrap
348
biofractal

ボタン

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() を使用します。

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

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

// Enabled with:
$('input[type="submit"], input[type="button"], button').disable(false);

JSFiddle無効ボタンおよび入力デモ 。

それ以外の場合は、jQueryの prop() メソッドを使用します。

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

アンカータグ

disabledがアンカータグの 有効なプロパティ ではないことは注目に値します。このため、Bootstrapは.btn要素に次のスタイルを使用します。

.btn.disabled, .btn[disabled] {
    cursor: default;
    background-image: none;
    opacity: 0.65;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    color: #333;
    background-color: #E6E6E6;
}

[disabled]クラスが.disabledクラスと同様にターゲットにされていることに注意してください。 .disabledクラスは、アンカータグを無効にするために必要なものです。

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

もちろん、クリックしてもリンクが機能しなくなるわけではありません。上記のリンクは http://example.com にアクセスします。これを防ぐために、 event.preventDefault() を呼び出すdisabledクラスを使用して、アンカータグをターゲットとする簡単なjQueryコードを追加できます。

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

toggleClass() を使用してdisabledクラスを切り替えることができます。

jQuery.fn.extend({
    disable: function(state) {
        return this.each(function() {
            var $this = $(this);
            $this.toggleClass('disabled', state);
        });
    }
});

// Disabled with:
$('a').disable(true);

// Enabled with:
$('a').disable(false);

JSFiddle無効リンクデモ 。

組み合わせた

次に、上で作成した前の無効化関数を拡張して、 is() を使用して無効化しようとしている要素のタイプを確認できます。このようにして、inputまたはbutton要素でない場合はtoggleClass()を、そうでない場合はdisabledプロパティを切り替えます。

// Extended disable function
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);
        });
    }
});

// Disabled on all:
$('input, button, a').disable(true);

// Enabled on all:
$('input, button, a').disable(false);

完全に結合されたJSFiddleデモ 。

さらに注意すべきは、上記の関数はすべての入力タイプに対しても機能するということです。

569
James Donnelly

もっと簡単で簡単な方法は考えられません。 ;-)

アンカータグを使用する（リンク）：

<a href="#delete-modal" class="btn btn-danger" id="delete">Delete</a>

アンカータグを有効にするには

 $('#delete').removeClass('disabled');
 $('#delete').attr("data-toggle", "modal");

enter image description here

アンカータグを無効にするには

 $('#delete').addClass('disabled');
 $('#delete').removeAttr('data-toggle');

enter image description here

45
oikonomopo

テキストフィールドと送信ボタンがあるとします。

<input type="text" id="text-field" />
<input type="submit" class="btn" value="Submit"/>

無効にする：

ボタンを無効にするには、例えばボタンを送信するには、 disabled attributeを次のように追加するだけです。

$('input[type="submit"]').attr('disabled','disabled');

上記の行を実行した後、送信ボタンのHTMLタグは次のようになります。

<input type="submit" class="btn" value="Submit" disabled/>

'disabled'属性に が追加されています。

有効にする

テキストフィールドにテキストがある場合など、ボタンを有効にします。ボタンを有効にするには、 disable 属性を削除する必要があります。

 if ($('#text-field').val() != '') {
     $('input[type="submit"]').removeAttr('disabled');
 }

これで上記のコードは 'disabled'属性を削除します。

26
Sohail xIN3N

私はパーティーに遅れていることを知っていますが、特に2つの質問に答えるために：

"次のように特定のclick-thingsを無効にするだけです。

  • クリックをやめます
  • 彼らは無効に見えます

これはどのくらい難しいですか？ "

クリックをやめます

1. <button>や<input type="button">のようなボタンには、属性disabledを追加します。

<button type="submit" disabled>Register</button>
<input type="button" value="Register" disabled>

2.リンク、任意のリンク...、実際には任意のHTML要素に対して、CSS3 pointer eventsを使用できます。

.selector { pointer-events:none; }

ポインタイベントに対するブラウザのサポートは、今日の最先端技術（5/12/14）によって素晴らしいものになりました。しかし、通常IEレルムでレガシブラウザをサポートする必要があるため、IE10以下ではポインタイベントをサポートしないでください： http://caniuse.com/pointer-events 。そのため、ここで他の人が言及しているJavaScriptソリューションの1つを使用することは、レガシーブラウザを使用する方法かもしれません。

ポインタイベントに関する詳細情報：

彼らは無効に見える

明らかにこれはCSSの答えなので、

1. <button>や<input type="button">のようなボタンには[attribute]セレクターを使います。

button[disabled] { ... }

input[type=button][disabled] { ... }

-

これは私がここで述べたものを使った基本的なデモです：http://jsfiddle.net/bXm5B/4/

お役に立てれば。

22
Ricardo Zea

私のようにボタンを無効にしたいだけの場合は、この長いスレッドに隠されている単純な答えをお見逃しなく。

 $("#button").prop('disabled', true);
16
Graham Laight

BootstrapのJSボタンを使っていて 'loading'状態を使っていると変な問題があることに注意してください。なぜこれが起こるのか私にはわかりませんが、ここでそれを修正する方法があります。

ボタンがあり、それをロード状態に設定したとします。

var myButton = $('#myBootstrapButton');
myButton.button('loading');

今、あなたはそれを読み込み中の状態から取り除きたいが、それを無効にしたい（例えば、ボタンが保存ボタンだった、読み込み中の状態は進行中の検証を示し、検証は失敗した）これは妥当なBootstrap JSのように見えます。

myButton.button('reset').prop('disabled', true); // DOES NOT WORK

残念ながら、それはボタンをリセットしますが、無効にはしません。どうやら、button()は何らかの遅延タスクを実行します。だからあなたもあなたの無効化を延期する必要があります：

myButton.button('reset');
setTimeout(function() { myButton.prop('disabled', true); }, 0);

少し面倒ですが、私がよく使っているパターンです。

7
Henrik Heimbuerger

@James Donnellyは、jQueryを新しい機能で拡張することに依存する包括的な回答を提供しました。それは素晴らしいアイディアだから、必要な方法でうまくいくように彼のコードを修正するつもりだ。

jQueryの拡張 

$.fn.disable=-> setState $(@), true
$.fn.enable =-> setState $(@), false
$.fn.isDisabled =-> $(@).hasClass 'disabled'

setState=($el, state) ->
    $el.each ->
        $(@).prop('disabled', state) if $(@).is 'button, input'
        if state then $(@).addClass('disabled') else $(@).removeClass('disabled')

    $('body').on('click', 'a.disabled', -> false)

使用方法 

$('.btn-stateful').disable()
$('#my-anchor').enable()

コードは単一の要素または要素のリストを処理します。

ボタンと入力はdisabledプロパティをサポートし、trueに設定されている場合、それらは無効に見え（ブートストラップのおかげで）クリックされても起動しません。

アンカーはdisabledプロパティをサポートしていませんので、代わりに.disabledクラスを無効にして（再度ブートストラップのおかげで）見せるようにし、デフォルトのclickイベントをフックしてfalseを返すことでクリックを防ぎます（preventDefaultは不要） ここに ）。

注 ：アンカーを再度有効にするときに、このイベントをフック解除する必要はありません。 .disabledクラスを削除するだけでうまくいきます。

もちろん、カスタムのクリックハンドラをリンクに添付している場合、これは役に立ちません。ブートストラップとjQueryを使用するときに非常に一般的なことです。そのため、これに対処するために、次のようにisDisabled()拡張子を使用して.disabledクラスをテストします。

$('#my-anchor').click -> 
    return false if $(@).isDisabled()
    # do something useful

私はそれが物事を少し簡素化するのに役立つことを願っています。

7
biofractal

全員からの素晴らしい答えと貢献！ select要素を無効にすることを含めるために、この関数を少し拡張する必要がありました。

jQuery.fn.extend({
disable: function (state) {
    return this.each(function () {
        var $this = jQuery(this);
        if ($this.is('input, button'))
            this.disabled = state;
        else if ($this.is('select') && state)
            $this.attr('disabled', 'disabled');
        else if ($this.is('select') && !state)
            $this.removeAttr('disabled');
        else
            $this.toggleClass('disabled', state);
    });
}});

私のために働いているようです。皆さんありがとう！

6
Brandon Johnson

そのような振る舞いのために私はいつもjQueryUI buttonウィジェットを使います、私はそれをリンクとボタンのために使います。

HTML内にタグを定義します。

<button id="sampleButton">Sample Button</button>
<a id="linkButton" href="yourHttpReferenceHere">Link Button</a>

JQueryを使ってボタンを初期化します。

$("#sampleButton").button();
$("#linkButton").button();

それらを無効/有効にするにはbuttonウィジェットメソッドを使用します。

$("#sampleButton").button("enable"); //enable the button
$("#linkButton").button("disable"); //disable the button

ボタンとカーソルの振る舞いには注意が必要ですが、無効にしたときにボタンスタイルをより深くして変更する必要がある場合は、ページのCSSスタイルファイル内の次のCSSクラスを上書きします。

.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
      background-color:aqua;
      color:black;
 }

ただし、覚えておいてください。これらのCSSクラス（変更された場合）は他のウィジェットのスタイルも変更します。

5
El Bayames

以下は私にとって非常にうまくいっています。

$("#button").attr('disabled', 'disabled');
3
Raptor

これはどちらかといえば遅い答えですが、ブーストボタンをクリックした後無効にしてNice効果を追加する方法を探しているときにこの質問に出会いました（f.e a spinner）。私はまさにそれをする素晴らしいライブラリを見つけました：

http://msurguy.github.io/ladda-bootstrap/ /

必要なcssとjsを含め、ボタンにいくつかのプロパティを追加し、javascriptでladaを有効にするだけです。あなたのボタンは新しい生活をしています（それがどれほど美しいかを見るためにデモをチェックしてください）！

2
Serafeim

私は私の答えが遅れていることを知っています、しかしIMOこれはボタンを「有効にする」と「無効にする」ボタンを切り替える最も簡単な方法です

function toggleButtonState(button){

  //If button is enabled, -> Disable
  if (button.disabled === false) {
    button.disabled = true;

  //If button is disabled, -> Enable
  } else if (button.disabled === true) {
    button.disabled = false;
  }
}
2
jward01

これは上手くいきません

$(this).attr('checked') == undefined

でコードを調整してください

if(!$(this).attr('checked') || $(this).attr('checked') == false){
2
Kiko Seijo

現在有効になっているもののように見えるとします。

<button id="btnSave" class="btn btn-info">Save</button>

これを追加するだけです：

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

これでボタンが無効になります

<button id="btnSave" class="btn btn-primary" disabled>Save</button>
1
Apollo

ページ上に次のようなボタンがあるとします。

<input type="submit" class="byBtn" disabled="disabled" value="Change"/>
<input type="submit" class="byBtn" disabled="disabled" value="Change"/>
<input type="submit" class="byBtn" disabled="disabled" value="Change"/>
<input type="submit" class="byBtn" disabled="disabled" value="Change"/>
<input type="submit" class="byBtn" disabled="disabled" value="Change"/>
<input type="submit"value="Enable All" onclick="change()"/>

Jsコード：

function change(){
   var toenable = document.querySelectorAll(".byBtn");        
    for (var k in toenable){
         toenable[k].removeAttribute("disabled");
    }
}
1
Samit