There may be cases when you want to disable a select box to prevent users from making any selections. This can be done easily using jQuery. In this tutorial, you will learn how to disable a select box using jQuery.
Disabling a Select Box using jQuery
To disable a select dropdown option box using jQuery by id, name, class, you can use the .prop() method. The .prop() method is used to get or set the value of a property for a selected element. To disable a select dropdown option box, you need to set the “disabled” property of the select box to “true”. Here’s the code:
//code disable select dropdown option in jquery
$(document).ready(function() {
$("#mySelectBox").prop("disabled", true);
});
In the above code, the $(document).ready() method is used to make sure that the DOM is fully loaded before the script is executed. The $("#mySelectBox") selector is used to select the select box element with the id mySelectBox. The .prop() method is used to set the “disabled” property of the select box to “true”, which will disable the select box.
You can also enable the select box again by setting the “disabled” property to “false”. Here’s the code:
//code enable select dropdown option in jquery
$(document).ready(function() {
$("#mySelectBox").prop("disabled", false);
});
In the above code, the $(document).ready() method is used to make sure that the DOM is fully loaded before the script is executed. The $("#mySelectBox") selector is used to select the select box element with the id mySelectBox. The .prop() method is used to set the “disabled” property of the select box to “false”, which will enable the select box again.
Conclusion
In this tutorial, you learned how to disable a select box using jQuery. The .prop() method is used to set the “disabled” property of the select box to “true”, which will disable the select box. You can also enable the select box again by setting the “disabled” property to “false”. This method can be used to prevent users from making any selections in a select box.
