单击另一个按钮并提交表单后启用一个按钮答案

【问题标题】：Enable a button after another button is clicked and form is submitted单击另一个按钮并提交表单后启用一个按钮
【发布时间】：2015-11-04 15:45:56
【问题描述】：

我有两个按钮：查询和导出。默认情况下禁用导出按钮，但是当单击查询按钮并加载表单时，我希望启用导出按钮。

现在，当我单击查询时，导出已启用一秒钟，然后又恢复为禁用状态。我假设在提交表单并将“导出”按钮恢复为其原始状态时，这有一些事情要做。

<button type="submit" class="btn btn-primary btn-small" id="query">Query</button>
<button class="btn btn-primary btn-small" id="export-button" disabled="disabled">Export</button>

这是我的 jQuery 目前的样子。

$(".form").on("submit", function () {
    $('#export-button').prop('disabled', false);
})

【问题讨论】：

“我假设这在提交表单并将导出按钮恢复到原始状态时有一些事情要做。” 正确。除非您拦截了提交事件，否则页面将加载一个新页面（或同一页面）并且更改将丢失。
@j08691 有没有办法以某种方式存储更改，以便在重新加载页面后启用按钮？
您需要将点击的事实存储在某处，例如 cookie、会话、URL、localStorage、数据库等中。
你为什么不使用 ajax 并在成功时启用按钮？
@NenadVracar 不幸的是，我对 ajax 不太熟悉，但我会研究一下。

标签： jquery html css

【解决方案1】：

我知道我之前发布了这个，但如果有人遇到类似的问题，我会采取以下措施来解决它：

首先我在表单中创建了一个隐藏输入来记住按钮是否被点击

<input type="hidden" name="clicked" value="true" />

在此函数中，如果单击按钮，它将检查会话存储，或者将其保存到会话存储。

$(function () {
    $(document).ready(function () {
    var clicked = sessionStorage.getItem('clicked');
        if (clicked == 'true') {
            $('#exportButton').removeAttr('disabled');
        } else {
            $('#exportButton').attr('disabled', 'disabled');
        }
    });
    $('#query').on("click", function () {
        sessionStorage.setItem('clicked', 'true');
    });
    $('#reset').on("click", function () {
        sessionStorage.setItem('clicked', 'false');
    });
});

【讨论】：

【解决方案2】：

jQuery 1.6+ https://api.jquery.com/removeProp/
jQuery 1.5-https://api.jquery.com/removeAttr/

如果你有 jQuery 1.6+，试试

$('#export-button').removeProp('disabled');

如果你有 jQuery 1.5 或以下版本尝试使用：

$('#export-button').removeAttr('disabled');

并确保您的表单具有 .form 类

【讨论】：

OP 的 jQuery 工作正常。只是页面正在重新加载，按钮又回到禁用状态。
感谢您的快速回复！无论如何我试过了，我仍然得到相同的结果 - 导出按钮启用一秒钟然后再次禁用。

【解决方案3】：

您可以通过这种方式实现它。假设您使用的是带有默认 get 方法的表单标签。

  <form>
    <button type="submit" name="submit" class="btn btn-primary btn-small" id="query">Query</button>
    <?php 
     if(empty($_GET)) 
        $str = 'disabled="disabled"';
     else 
        $str ="";
    ?>
     <button class="btn btn-primary btn-small" id="export-button" <?php echo $str; ?>>Export</button>
  </form>

【讨论】：

我不允许为此使用 php。我需要使其与其余代码保持一致。