33

無効になっているボタンをクリックして、ユーザーにフィードバックを提供することはできますか?

HTML:

<input type="button" value="click" disabled>

および JavaScript:

$('input').mousedown(function(event) {
    alert('CLICKED');
});

上記のコードは機能しません。これもそうではありません:

$('input').live('click', function () {
    alert('CLICKED');
});
4

9 に答える 9

31

無効な要素のクリックをキャプチャする方法はありません。あなたの最善の策はclass、要素の特定に反応することです。

HTML マークアップ:

<input type="button" class="disabled" value="click" />

JavaScript コード:

$('input').click(function (event) {
    if ($(this).hasClass('disabled')) {
        alert('CLICKED, BUT DISABLED!!');
    } else {
        alert('Not disabled. =)');
    }
});

次に、CSS スタイルを使用して無効な外観をシミュレートできます。

.disabled
{
    background-color: #DDD;
    color: #999;
}

これは、その使用法を示すjsFiddleです。

于 2013-04-19T16:32:31.297 に答える
22

クリックイベントが発生するため、フィールドを作成readonlyすると役立ちます。ただし、動作の違いに注意してください。

<input type="button" value="click" readonly="readonly" />
于 2013-11-12T09:54:56.650 に答える
15

置く

input[disabled] {pointer-events:none}

CSS で (無効な入力に対するクリックを一部のブラウザーが完全に破棄するのを防ぎます)、親要素のクリックをキャプチャします。これは、要素の上に透明なオーバーレイを配置してクリックをキャプチャするよりもクリーンなソリューションです。状況によっては、CSS を使用して無効な状態を単純に「シミュレート」するよりもはるかに簡単な場合があります (入力がまた、デフォルトのブラウザーの「無効」スタイルをオーバーライドする必要があります)。

このようなボタンが複数ある場合、どのボタンがクリックされたかを区別できるようにするために、それぞれに一意の親が必要になりpointer-events:noneます。（または、クリック座標をテストすることもできます...）。

ただし、古いブラウザをサポートする必要がある場合は、どのブラウザがサポートされているかを確認してくださいpointer-events: http://caniuse.com/#search=pointer-events

于 2015-08-17T20:26:28.030 に答える
0

<input id="idButton" type="button" value="click" disabled>

$('#idButton').on('click', function() {
    // The button is disabled but this will be executed.
});

上記の例は、イベントをキャプチャする必要がある無効なボタンの JQuery で動作します。

于 2015-05-01T13:40:32.873 に答える
0

無効なボタンをクリックすることはできませんが、無効なリンクをクリックすることはできます

$('.btn').on('click', function(e) {
  e.preventDefault();
  $txt = $('div.text');
  if($(this).attr('disabled')){
    $txt.html('CLICKED, BUT DISABLED!!');
  }else{
    $txt.html('Not disabled. =)');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="text">No action</div>
<input type="button" href="" class="btn" value="click" />
<input type="button" href="" class="btn" value="click disabled" disabled />
<a href="" class="btn">Click</a>
<a href="" class="btn" disabled>Click Disabled</a>

于 2016-02-09T22:44:57.273 に答える
-1

ボタンを何らかの要素でラップし、代わりにこの要素をクリックするとどうなりますか?

<span id="container">
    <input type="button" value="click" disabled>
</span>

Javascript:

$("#container").click(function(){
    alert("Element clicked!");
})
于 2018-02-14T14:24:01.390 に答える
-3

無効にするだけでなく、 disabled="disabled" を使用する必要があります。

$('input:disabled').val('disabled');
于 2013-04-19T16:31:18.587 に答える