0

我已经尝试了通常可以使用的各种方法，但 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({
4

5 回答 5

0

由于 your .buttonFinishis a 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 回答
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 回答
-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;
    }
  }
于 2016-09-06T17:44:39.367 回答