最初のクリック後に[完了]ボタンを無効にする方法

Question

通常動作するさまざまな方法を試しましたが、SmartWizardでこれらのメソッドが機能しないようです。

複数の送信を防ぐために、[完了]ボタンを無効にしてクリックした後にテキストを変更する必要があります。どこにコードを配置しても、画面は変更されず、ボタンの値は変更されず、ボタンは無効になりません。

私はまた、右のAJAX呼び出しの前に最終段階の検証の一環として、およびFinishCallbackでこれを使用してみました...

$(".actionBar .buttonFinish").click(function(){ 
    $(".actionBar .buttonFinish").addClass("buttonDisabled"); 
    $(".actionBar .buttonFinish").text("Sending..."); 
}); 

を一般的なクリック機能を試してみました。 ajax呼び出しが完了し、ajaxの成功が終了するまでは何も変わりません。

UPDATE

[OK]を、これは確かにタイミングの問題のためです。 ajax呼び出しを失敗させると、ボタンは無効になり、テキストが変更されます。私はこれらの2つのことがajax呼び出しに移る前に起こることを確認する必要があります。これまでのところ、私はこれを試してみましたが、それはうまくいきませんでした：

$(".actionBar .buttonFinish").addClass("buttonDisabled").text("Sending...").ajax({ 

Answer 1

は試してみてください。この

<input type='button' id='btn' onclick='click_me()' value='click'> 

    var disable = false; 
    function click_me() 
    { 
    if(disable = 'false') { 
     $(".actionBar .buttonFinish").addClass("buttonDisabled"); 
     $(".actionBar .buttonFinish").text("Sending..."); 
     disable = true; 
    } 
    } 

Answer 2

$(".actionBar .buttonFinish").click(function(){ 
    $(".actionBar .buttonFinish").attr('disabled', 'disabled'); 
    $(".actionBar .buttonFinish").text("Sending..."); 
}); 

あなたはボタンを無効にする「のonclick」イベントの最後にこれを追加することができます

Answer 3

$(this).prop("disabled", true); 

OR

$(this).attr("disabled", 'disabled'); 

jqueryのバージョンに応じて、 'prop'または 'attr'関数を使用する必要があります。

Answer 4

これを試してみてください。

$(document).ready(function(){ 
 
    $(function(){ 
 
    $(".buttonFinish").on("click", function(){ 
 
     $(this).prop('disabled', true); 
 
     $(this).val("Sending..."); 
 
    }); 
 
    }); 
 
});

input{ 
 
    display: block 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 

 
<div> 
 
    <form> 
 
    <input type="text"> 
 
    <input type="text"> 
 
    <input class="buttonFinish" type="submit"> 
 
    </form> 
 
</div>

UPDATE

あなたはAJAX呼び出しの前にボタンやテキストを無効にしたい、私はあなたを理解している場合、私は見てみましょうか？あなたはbeforeSendで試したことがありますか？

$(document).ready(function(){ 
 
    $(function(){ 
 
    $("form").submit(function(e){ 
 
     e.preventDefault(); 
 
     
 
     $.ajax({ 
 
     beforeSend: function(){ 
 
      $(".buttonFinish").prop('disabled', true); 
 
      $(".buttonFinish").val("Sending..."); 
 
     }, 
 
     complete: function(){ 
 
      // remove disabled and change the text 
 
     }, 
 
     }); 
 
    }); 
 
    }); 
 
});

input{ 
 
    display: block 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 

 
<div> 
 
    <form> 
 
    <input type="text"> 
 
    <input type="text"> 
 
    <input class="buttonFinish" type="submit"> 
 
    </form> 
 
</div>

Answer 5

あなた.buttonFinishがリンク、ではない実際にボタンあるので、あなたは.prop('disabled', true)でそれを無効にすることはできません - あなたの代わりに「ブロッキングペイン」を使用することをお勧めします。

ページの最後にdivを挿入すると、何も表示されず、見えなくなり、高さと幅がなく、</body>タグの直前に表示されます。

<div id="blocker"></div> 
</body> 

「ボタン」をクリックすると、それは「前に」であるので、そのページの完全な高さ/幅を使用して、それが示すようになりますそれにクラスを追加し、高Zインデックス付きのほかのすべて;下のZインデックスとしてその下のコントロールに渡されないすべてのクリックを取得します。
あなたのクリックハンドラは$('blocker').addClass('blocking');がブロックページの残りそうなスタイル#blocker.blocking、その後、それが見えないスタイル#blockerに結果のDOM ...

<div id="blocker" class="blocking"></div> 
</body> 

使用CSSを与える含まれます。

$('a.finished').click(function(e) { 
 
    e.preventDefault(); 
 
    $('#blocker').addClass('blocking'); 
 
    // when ajax call finishes, 
 
    // use $('#blocker').removeClass('blocking'); 
 
});

#blocker { 
 
    position: fixed; 
 
    top: -10px; 
 
    left: -10px; 
 
    height: 0; 
 
    width: 0; 
 
    z-index: -20; 
 
    background-color: white; 
 
} 
 

 
#blocker.blocking { 
 
    height: auto; 
 
    width: auto; 
 
    bottom: -10px; 
 
    right: -10px; 
 
    opacity: 0.6; 
 
    z-index: 9000; 
 
}

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.js"></script> 
 
<div class="stuff"> 
 
    <p>This is stuff</p> 
 
    <p>This is other stuff</p> 
 
    <p>A <a href="#" class="finished">link</a> is in here.</p> 
 
</div> 
 
<div id="blocker"></div>