javascript - 想要在页面加载时禁用下拉列表并在 HTML 中的按钮单击事件中启用它

Question

我想在页面加载时禁用下拉列表，并使用 JQuery 在按钮单击事件中启用它。我试过下面的代码，但它不工作。发生的事情是在页面加载时禁用列表，然后在按钮单击事件中启用列表一秒钟，然后再次禁用列表。

$(document).ready(function () {
 debugger;
if (jQuery('#btnViewHistoricData').data('clicked')) {
 $("#ddlBranch").prop("disabled", false);
} else {
 $("#ddlBranch").prop("disabled", true);
}
});

 <div class="text-center">
<button id="btnViewHistoricData" class="btn bg-dark">View Historic Data</button>
</div>

<div class="col-md-3">
<div class="form-group m-r-sm">
<label for='rf_name'>Branch</label>
<select id="ddlBranch"  class="m-b-sm  w-lg form-control" onchange="ViewHistoricData()">
<option value="ALL" selected="selected">ALL</option>
</select>
</div>

Answer 1

当您单击该按钮时，您将执行一个表单发布，导致文档重新加载并且下拉列表被设置为禁用。

所以制作type=button的按钮

<button id="btnViewHistoricData" class="btn bg-dark" type="button">View Historic Data</button>

现在单击按钮时将不会有表单发布，因此可以启用 DropDownList。

<script type="text/javascript">
    $(document).ready(function () {
        $("#ddlBranch").prop("disabled", "disabled");

        $("#btnViewHistoricData").click(function () {
            $("#ddlBranch").removeAttr("disabled");
        });
    });
</script>