0

通常は機能するさまざまな方法を試しましたが、SmartWizard がこれらの方法の機能を妨げているようです。

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

典型的なクリック機能を試してみました...

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

また、これを最終ステップの検証の一部として、および ajax 呼び出しの直前の FinishCallback で使用してみました。ajax 呼び出しが完了し、ajax の成功が実行されるまで、何も変わりません。

アップデート

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

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

5 に答える 5

0

これを「onclick」イベントの最後に追加して、ボタンを無効にすることができます

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

また

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

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

于 2016-09-06T17:53:19.410 に答える
0

これを試して。

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

アップデート

私があなたを理解しているかどうか見てみましょう.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>

于 2016-09-06T18:34:48.523 に答える
0 
$(".actionBar .buttonFinish").click(function(){
   $(".actionBar .buttonFinish").attr('disabled', 'disabled');
   $(".actionBar .buttonFinish").text("Sending...");
});
于 2016-09-06T17:49:39.360 に答える
0

your.buttonFinishはlinkであり、実際にはbuttonではないため、無効にすることはできません.prop('disabled', true)— 代わりに「ブロッキング ペイン」を使用することをお勧めします。

ページの最後に div を配置します。タグの直前に、</body>何も含まれておらず、見えず、ページの外にあり、高さと幅がありません。 

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

「ボタン」がクリックされたら、それを表示するクラスを追加します。ページの高さ/幅全体を使用し、高い z-index を使用して、他のすべての「前」にします。その下のコントロールに渡されないすべてのクリックが低い z-index として取得されます。
クリックハンドラーには$('blocker').addClass('blocking');、結果のDOMを与えることが含まれます...

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

CSS を使用し#blockerて見えないようにスタイル#blocker.blockingを設定してから、ページの残りの部分をブロックするようにスタイルを設定します。

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

于 2016-09-06T23:29:02.410 に答える
-1

Try this

<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;
    }
  }
于 2016-09-06T17:44:39.367 に答える