無効なボタンは、まだイベントをクリックして聞きます。

Question

jqueryバリデーションを行うフォームに問題があります。

（CoffeeScriptの）：特定の入力フィールドが記入されていない場合は、disabled属性追加して「前進」ボタンを無効にする必要があります。

if errors 
    $('.btn-move-forward').attr("disabled", true) 

動作しますが、私は、そのボタンのクリックイベントを持っています

$('.btn-move-forward').click -> 
    $('#step2, #step3').toggle() 

.btn-move-forwardは、ボタンが無効になっているときにクリックイベントを発生させないと思っていますが、それはあります。

まず、すべてのブラウザ仕様ではこのようなことは起こらないと定義されているため、わかりません。このように、イベントリスナーを

$('.btn-move-forward').click -> 
    if !$(this).is(:disabled) 
    $('#step2, #step3').toggle() 

またはこの

$('.btn-move-forward').click -> 
    if $(this).prop("disabled", false) 
    $('#step2, #step3').toggle() 

または組み合わせ：：とにかく、私は次のようなものをすることによって、それを回避しようとした

$('.btn-move-forward').on 'click', '.btn-move-forward:enabled', -> 
    $('#step2, #step3').toggle() 

いいえ、このウォンのすべて正しく動作しません。ボタンはまだ移動転送ボタンとして動作します。

私が欲しいのは、無効にされている場合、onclickを聞いていないボタンです。

Answer 1

オフ

$('.btn-move-forward').prop("disabled", true) 

Answer 2

代わりにprop()を使用するように変更してください。クリックイベント

$('.btn-move-forward').off('click'); 

Answer 3

くださいdisabledプロパティは、要素のみを形成するために適用されます。つまり、.btn-move-forward要素が<button>または<input type="button">でない場合、disabled属性は無効になります。あなたはここにbuttonを使用して実施例を参照することができ

：

$('.btn-move-forward').prop("disabled", true).click(function() { 
 
    console.log('Moving forward...'); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<button class="btn-move-forward">Move forward</button>