ボタンとしてスタイル設定されたアンカーを使用することもあれば、ボタンだけを使用することもあります。特定のクリックするものを無効にしたいので、次のようになります。
- 障害者に見える
- クリックされなくなる
これどうやってするの？
ベストアンサー1
ボタン
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.comdisabledこれを防ぐには、アンカータグをターゲットにして、呼び出すクラスを指定する簡単なjQueryコードを追加します。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);
さらに注目すべきは、上記の関数はすべての入力タイプでも機能するということです。