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>
|
If you run the above example it will produce output something like this –
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>
|
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 –
Advertisements
