How to Disable Select Box using jQuery

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.

Recommended jQuery Ajax Tutorials

AuthorDevendra Dode

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

Leave a Reply

Your email address will not be published. Required fields are marked *