禁用BootstrapButton提交MVC后

Question

我正在使用引导程序，我正在尝试禁用后按钮<禁用按钮，用户不要在加载时点击，如下所示

JS：

<script>
    $("#button").click(function () {
        $(this).attr('disabled', 'disabled');
    });
</script>

HTML

<button type="submit" class="btn btn-primary" id="button"/>

这段代码工作得很好：当我点击我的按钮是禁用:)，但我的按钮不起作用，就像在提交前禁用一样。

任何想法？

Answer 1

这样做：

<input type="submit" class="btn btn-primary" id="button"/>

并使用表单提交事件来禁用按钮：

$("form").submit(function () {
        $(this).find("input:submit").attr('disabled', 'disabled');
    });

Answer 2

Bootstrap有一些内置的方法可以做到这一点。它用于设置按钮上的加载状态，而不一定仅用于禁用，但在我看来，它实际上更好，因为它为您的用户提供了一些实际发生的视觉反馈。

<button type="button" data-loading-text="Submitting..." class="btn btn-primary">
  Submit
</button>

<script>
  $('[data-loading-text]').on('click', function () {
    $(this).button('loading');
  });
</script>

有关运行中的示例，请参阅this fiddle。