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

试试这段代码。

＆＃13;

$(document).ready(function () {

$("#btnViewHistoricData").click(function(){
  $("#ddlBranch").removeAttr("disabled");

});

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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()" disabled="disabled">
<option value="ALL" selected="selected">ALL</option>
</select>
</div>

＆＃13;

Answer 2

$(document).ready(function () {
 debugger;
if (jQuery('#btnViewHistoricData').on('clicked')) {  // Use `on` instead
 $("#ddlBranch").prop("disabled", false);
} else {
 $("#ddlBranch").removeAttr("disabled");
}
});

Answer 3

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

所以按下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>

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

3 个答案: