ボタンのスタイルのアンカーを使用することもあれば、ボタンだけを使用することもあります。特定のクリックを無効にして、次のようにします。
- 彼らは障害者に見えます
- クリックされなくなる
これどうやってするの？
質問する
642525 次
16 に答える
581
ボタン
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);
それ以外の場合は、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に移動します。これを防ぐために、単純な jQuery コードを追加して、disabled呼び出すクラスでアンカー タグをターゲットにすることができevent.preventDefault()ます。
$('body').on('click', 'a.disabled', function(event) {
event.preventDefault();
});
disabled以下を使用してクラスを切り替えることができますtoggleClass()。
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);
組み合わせた
次に、上記で作成した以前の無効化関数を拡張して、 を使用して無効化しようとしている要素のタイプを確認できますis()。このようにして、それがor要素でtoggleClass()ない場合、またはある場合はプロパティを切り替えることができます。inputbuttondisabled
// 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);
上記の関数はすべての入力タイプでも機能することに注意してください。
于 2013-05-28T09:15:39.777 に答える
48
これ以上シンプルで簡単な方法は考えられません! ;-)
アンカー タグ (リンク) の使用 :
<a href="#delete-modal" class="btn btn-danger" id="delete">Delete</a>
アンカー タグを有効にするには:
$('#delete').removeClass('disabled');
$('#delete').attr("data-toggle", "modal");
アンカー タグを無効にするには:
$('#delete').addClass('disabled');
$('#delete').removeAttr('data-toggle');
于 2013-07-29T22:16:51.617 に答える
27
テキストフィールドと送信ボタンがあるとします。
<input type="text" id="text-field" />
<input type="submit" class="btn" value="Submit"/>
無効にする:
たとえば、送信ボタンなどのボタンを無効にするには、disabled属性を次のように追加する必要があります。
$('input[type="submit"]').attr('disabled','disabled');
上記の行を実行すると、送信ボタンの HTML タグは次のようになります。
<input type="submit" class="btn" value="Submit" disabled/>
「無効」属性が追加されていることに注意してください。
有効化:
テキストフィールドにテキストがある場合など、ボタンを有効にするため。ボタンを有効にするには、 disable属性を削除する必要があります。
if ($('#text-field').val() != '') {
$('input[type="submit"]').removeAttr('disabled');
}
上記のコードは「無効」属性を削除します。
于 2015-04-04T10:02:08.647 に答える
18
私のように、ボタンを無効にしたいだけなら、この長いスレッドに微妙に隠されている簡単な答えを見逃さないでください。
$("#button").prop('disabled', true);
于 2016-10-31T15:20:13.213 に答える
7
@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無効に見えるようにし (ブートストラップのおかげで)、false を返すことでクリックを防止するデフォルトのクリック イベントをフックします ( preventDefaultsee hereは必要ありません) 。 .
注: アンカーを再度有効にするときに、このイベントをフック解除する必要はありません。クラスを削除するだけで.disabledうまくいきます。
もちろん、カスタム クリック ハンドラーをリンクにアタッチしている場合、これは役に立ちません。これは、ブートストラップと jQuery を使用する場合によくあることです。したがって、これに対処するために、次のようにisDisabled()拡張機能を使用して.disabledクラスをテストします。
$('#my-anchor').click ->
return false if $(@).isDisabled()
# do something useful
物事を少し簡素化するのに役立つことを願っています。
于 2013-05-27T16:13:34.833 に答える
6
すべてからの素晴らしい回答と貢献！選択要素の無効化を含めるために、この関数を少し拡張する必要がありました。
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);
});
}});
私のために働いているようです。皆さんありがとう！
于 2014-11-11T01:02:28.993 に答える
5
そのような動作のために、私は常に jQueryUIbuttonウィジェットを使用します。これをリンクとボタンに使用します。
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 クラス (変更された場合) は、他のウィジェットのスタイルも変更します。
于 2015-04-20T14:06:53.383 に答える