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

OR

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

你需要使用'prop'或'attr'函数，具体取决于jquery版本

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

由于您的div { background: #abcdef; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 50px; } .price { position: absolute; right: 0; }是链接，而不是按钮，因此您无法使用.buttonFinish禁用它 - 您可以想要使用＆＃34;阻止窗格＆＃34;代替。

在页面的最后放置一个div，我更喜欢在.prop('disabled', true)标记之前，它不包含任何内容，并且看不见，在页面外，没有高度和宽度。

</body>

当＆＃34;按钮＆＃34;单击然后在其上添加一个将使其显示的类，使用页面的完整高度/宽度和高z-index，因此它是＆＃34;在前面＆＃34;其他一切;它将获得所有不会传递给它下面的控件的点击作为较低的z-index 您的点击处理程序将包含<div id="blocker"></div> </body>给出生成的DOM ...

$('blocker').addClass('blocking');

使用CSS来设置<div id="blocker" class="blocking"></div> </body>样式，使其看不见，然后设置样式#blocker，以便它阻止页面的其余部分。

＆＃13;

#blocker.blocking

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

5 个答案: