Отключить кнопку во время начальной загрузки, включить после отправки

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

Попробуйте следующим образом:

$(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", чтобы избежать перезагрузкистраницы, затем для отправки формы вы можете использовать AJAX-функцию jQuery

Answer 2

Сначала нужно дать btnDisableFilteredList отключенную опору:

disabled="disabled"

Затем настройте прослушиватель событий при нажатии на входе btnSearch, чтобы удалить отключенную опору со входа 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>