第一次单击后如何禁用完成按钮

Question

我已经尝试了各种正常工作的方法，但 SmartWizard 似乎阻止了这些方法工作。

我需要禁用完成按钮并在单击后更改文本以防止多次提交。不管我把代码放在哪里，画面不变，按钮的值不变，按钮也没有禁用。

我尝试了典型的点击功能...

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

我还尝试将其用作最后一步验证的一部分，并在 ajax 调用之前的 FinishCallback 中使用。在 ajax 调用完成并且 ajax 成功运行之后，没有任何变化。

更新

好的，这肯定是时间问题。如果我导致 ajax 调用失败，按钮会禁用并且文本会更改。在继续进行 ajax 调用之前，我需要确保这两件事发生。到目前为止，我尝试了这个，但没有成功：

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

Answer 1

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

Answer 2

您可以在 'onclick' 事件的末尾添加此按钮以禁用按钮

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

或

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

您需要根据 jquery 版本使用函数 'prop' 或 'attr'

Answer 3

试试这个。

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

Answer 4

由于你的.buttonFinish 是一个链接，而不是一个真正的按钮，你不能用.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>

Answer 5

试试这个

<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;
    }
  }