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>

i want to disable the list on page laod and enable it on button click, thats why i have chosen if else condition — Prakash
– Prakash, Commented Jul 31, 2017 at 14:08
whenever btnViewHistoricData is not pressed, the list is disabled — c2huc2hu
– c2huc2hu, Commented Jul 31, 2017 at 14:51

VDWWD · Accepted Answer · 2017-07-31 18:14:33Z

1

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>

answered Jul 31, 2017 at 18:14

VDWWD

35.7k23 gold badges67 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kamran Jabbar · Accepted Answer · 2017-07-31 14:11:55Z

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

answered Jul 31, 2017 at 14:11

Kamran Jabbar

8781 gold badge8 silver badges21 bronze badges

4 Comments

Prakash Over a year ago

at the end its again disabling the list

Kamran Jabbar Over a year ago

I am not getting you can you please explain more?

Prakash Over a year ago

after enabling the dropdown list for fraction of second, its again disabling the dropdown list

Kamran Jabbar Over a year ago

Disable only happens when you refresh the page you can check by running code snippet. After fraction of seconds it is not getting disable.

Himanshu Upadhyay · Accepted Answer · 2017-07-31 14:12:30Z

0

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

answered Jul 31, 2017 at 14:12

Himanshu Upadhyay

6,5571 gold badge23 silver badges34 bronze badges

1 Comment

Prakash Over a year ago

not working as expected. Its not disabling the list on page load

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related