Question

我希望在初始页面加载期间禁用btnDisableFilteredList。然后，我想在单击btnSearch按钮后启用它。我该如何使用jQuery？

<div class="panel panel-heading">
  <form id="frmAutoCritical">
    Search: <input type="text" name="SearchString" /><input type="submit" id="btnSearch" value="Filter" />
    <input type="button" id="btnDisableFilteredList" value="Disable Filtered List" />
  </form>
</div>

Answer 1

您需要先给btnDisableFilteredList禁用的道具：

disabled="disabled"

然后在btnSearch输入上设置on click事件侦听器，以从btnDisableFilteredList输入中删除禁用的道具。

$(function() {
    $("#btnSearch").on("click", (e) => {
        e.preventDefault();
        $("#btnDisableFilteredList").prop("disabled", false);
    });
});

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<div class="panel panel-heading">
<form id="frmAutoCritical">        
    Search: <input type="text" name="SearchString" />
    <input type="submit" id="btnSearch"value="Filter"/>
    <input type="button" id="btnDisableFilteredList" value="Disable Filtered List" disabled="disabled"/>
</form>

Answer 2

以这种方式尝试：

$(document).ready(function() {
    $("#btnSearch").click(function () {
        $("#btnDisableFilteredList").css("display", "inline-block");
    });
});

#btnDisableFilteredList {
    display: none;
}

<div class="panel panel-heading">
    <form id="frmAutoCritical">
        Search:
        <input type="text" name="SearchString" />
        <input type="button" id="btnSearch" value="Filter" />
        <input type="button" id="btnDisableFilteredList" value="Disable Filtered List" />
    </form>
</div>

看看这个codepen

我使用type="button"而不是type="submit"来避免重新加载页面，然后使用jQuery's AJAX Function

提交表单

在初始加载期间禁用按钮，在提交后启用

2 个答案: