want to disable a dropdown list on page load and enable it on button click event in HTML

Question

I want to disable a dropdown list on page load and enable it on button click event using JQuery. I have tried the below code but its not working. What is happening is it is disabling the list on page load, then enabling the list on button click event for one second and then again disabling the list.

$(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

Try this code.

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

 <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 mr-sm"> <label for='rf_name'>Branch</label> <select id="ddlBranch" class="mb-sm w-lg form-control" onchange="ViewHistoricData()" disabled="disabled"> <option value="ALL" selected="selected">ALL</option> </select> </div> 

Answer 2

When you click the button you will do a form post, causing the document to reload and the dropdownlist to be set to disabled.

So make the button of type=button

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

Now when the button is clicked there will be no form post so the DropDownList can be enabled.

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

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

Answer 3

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