Is it possible to customize this codepen so that only one item can be checked at a time, with the ability to automatically uncheck the previous item when a new one is checked? Also, is there a way to use a custom image for the check mark instead of the default generated one?
<!-- Example Dropdown -->
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Menu</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Item 1</a>
<a href="#" class="dropdown-item dropdown-item-checked">Item 2</a>
<a href="#" class="dropdown-item">Item 3</a>
</div>
</div>
<p class="mt-4">
<a href="https://www.abeautifulsite.net/adding-a-checked-state-to-bootstrap-4-dropdown-menus">Check out the original post</a>
</p>
<p>
The code above was created by <a href="https://twitter.com/claviska">@claviska</a> and is now in the public domain.
</p>
.dropdown-item-checked::before {
position: absolute;
left: .4rem;
content: '✓';
font-weight: 600;
}
body {
padding: 1rem;
}
// Toggle checkmarks
$(document).on('click', '.dropdown-item', function(event) {
event.preventDefault();
$(this).toggleClass('dropdown-item-checked');
});