無効な入力またはボタンをクリックする

Question

無効なボタンをクリックしてユーザーにフィードバックを与えることはできますか？

HTML：

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

とJavaScript：

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

上記のコードは、私のために働いていません。どちらもこのありません：

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

Answer 1

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

HTMLマークアップ：

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

JavaScriptコード：あなたはその後、無効な外観をシミュレートするために、CSSスタイルを使用することができ

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

：

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

は、ここでその使用を実証jsFiddleです。

Answer 2

disabled要素は、ユーザーがそれらと対話することはできません。

したがって、いいえ、をdisabledボタンに付けることはできません。

Answer 3

あなたはこの問題を回避せずに、見ることができない。jQuery detect click on disabled submit button

ブラウザが無効要素のイベントを無効にします。

編集リンクからコンテキストを追加するには：

アスカーイベントが登録されていない理由の説明と、このスレッドを見つけました：http://www.webdeveloper.com/forum/showthread.php?t=186057

Firefox、およびおそらく他のブラウザを、上のDOMイベントを無効にしますフォームフィールド が無効になります。無効なフォームフィールドで開始するイベントはすべて であり、完全にキャンセルされ、DOMツリーを伝播しません。私が間違っている場合は を修正してください。無効なボタンをクリックすると、 のソースが無効になり、クリックイベントは完全に となります。ブラウザは文字通りボタンがクリックされたことを知らず、 もクリックイベントを渡しません。ウェブページの ブラックホールをクリックしているかのようです。

回避策は、実際にはそうではありませんが、無効にするようにボタンをスタイルすることです。

Answer 4

無効にするだけでなく、無効にする必要があります。

$('input:disabled').val('disabled'); 

Answer 5

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

<input type="button" value="click" readonly="readonly" /> 

Answer 6

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

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

上記の例では、キャプチャするイベントを必要とする無効化ボタンのjQueryを使って動作します。

Answer 7

は、（それが完全に無効入力のクリックを捨てるから、いくつかのブラウザを防止する）あなたのCSSに

input[disabled] {pointer-events:none} 

を入れて、親要素のクリックをキャプチャします。それはクリーンなソリューション、IMHO、クリックをキャプチャする要素の上に透明なオーバーレイを置くよりも、状況によっては、単にCSSを使用して無効な状態を "シミュレートする"よりずっと簡単かもしれません。デフォルトブラウザの「無効」スタイルを上書きする必要があります）。

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

あなたは古いブラウザをサポートする必要がある場合は、しかし、チェックしますかどれがサポートpointer-events：http://caniuse.com/#search=pointer-events

Answer 8

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

$('.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>

をクリックすることができます

Answer 9

いくつかの要素にボタンをラップし、代わりにこの要素をクリックするとどうなりますか？

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

Javascriptを：

$("#container").click(function(){ 
    alert("Element clicked!"); 
})