Disable Dropdown Button in Bootstrap


Disable Dropdown Button in Bootstrap : It is very simple to disable the dropdown button in Bootstrap. You can use bootstrap’s default class(disabled) to disable the bootstrap button. Here in this tutorial we are going to explain how you can disable the dropdown button in bootstrap using jquery. You can use our online editor to edit the code and see the output online.


Disable Dropdown Button in Bootstrap

To disable the bootstrap dropdown you can use the disabled class as below which will disable the dropdown button button in bootstrap.

Disable Dropdown Button in Bootstrap Example:

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle disabled" type="button" data-toggle="dropdown">Dropdown Demo Example
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Settings</a></li>
    <li><a href="#">Logout</a></li>
  </ul>
</div>

Try it »

If you run the above example it will produce output something like this –

Disable Dropdown Button in Bootstrap Example:


More About Enable/Disable Dropdown

Let’s have look over more example and demo here.


Enable/Disable Dropdown Button in Bootstrap Using jQuery

Sometimes we need to disable the dropdown button using jQuery , JavaScript. You can disable the dropdown buttons using jQuery as below –

Enable/Disable Dropdown Button functionality in Bootstrap Example:

<script type="text/javascript">
$(document).ready(function(){
    function disableDropdown(){
	$("#myDropdown").addClass('disabled');
	}
	 function enableDropdown(){
	 $("#myDropdown").removeClass('disabled');
	}
});
</script>

Try it »

In the above example we have created two functions disableDropdown() and enableDropdown() to handle the enable and disable functionality.

If you run the above example it will produce the output something like this –

Disable Dropdown Button in Bootstrap


Advertisements

Add Comment

📖 Read More