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

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索引。
您的点击处理程序将包括$('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;
    }
  }