As I work on customizing a bootstrap dropdown with checkboxes, my goal is to have the label name written on the input dropdown in between ';' whenever a checkbox from the dropdown is selected. This will create a similar result as shown in the uploaded picture when the dropdown is closed.
Check out this fiddle example for reference.
This solution may not be the most stylish, but it can serve as a starting point for your needs:
$(document).ready(function() {
$("ul.dropdown-menu input[type=checkbox]").each(function() {
$(this).change(function() {
var line = "";
$("ul.dropdown-menu input[type=checkbox]").each(function() {
if($(this).is(":checked")) {
line += $("+ span", this).text() + ";";
}
});
$("input.form-control").val(line);
});
});
});
While this question may be dated, there is a solution available in the form of a library that can help you achieve almost everything you need, with the exception of the specific design you are looking for. You can find more information about it here:
When using Bootstrap 4.1, you may encounter issues with checkboxes in a dropdown menu becoming unclickable after clicking an item. If anyone has found a better solution, please share.
<ul class="dropdown-menu dropdown-menu-form">
<li><label class="checkbox"><input type="checkbox">One</label></li>
<li><label class="checkbox"><input type="checkbox">Two</label></li>
</ul>
Add the following JS code:
// Enable forms/checkboxes in Bootstrap dropdown menus without causing them to disappear.
$(document).on('click', '.dropdown-menu.dropdown-menu-form', function(e) {
e.stopPropagation();
});
UPDATE
The code works well, but checkbox events trigger twice. Using the onchange event instead of onclick resolves this issue:
<ul class="dropdown-menu dropdown-menu-form">
<li><label class="checkbox"><input type="checkbox" onchange="some()">One</label></li>
<li><label class="checkbox"><input type="checkbox" onchange="some()">Two</label></li>
</ul>
Include the following jQuery code:
$(document).on('click', '.dropdown-menu', function (e) {
e.stopPropagation();
});
Snippet One net.createServer(function(socket){ socket.on('data',function(id){ getUserDetails(function(){console.log(id)}); }); }); function getUserDetails(next){ next(); } Snippet Two net.createServer(function(socket){ ...
Whenever I click the toggle button, I notice that the menu (which I have set to appear on toggle) only shows for a brief moment before disappearing. As a beginner in bootstrap, I am sure I might have made some obvious mistakes. Any assistance would be gr ...
Hello there, We are currently utilizing an open-source CMS that recently received an upgrade with a new feature - a javascript serviceworker implementation to manage all requests. This CMS includes workflow forms where users engage (created by us). Durin ...
I have folders with tooltips displaying text like '0 entries' or '5 entries' and so on. I am looking for a way to dynamically update this tooltip number every time an item is added to the folder. The initial count may not always start a ...
If I need to check if a certain ID exists and exit the process if an error is encountered right from the beginning, is there a more concise way to do it rather than using an if-else block? For example: Question.find({_id: req.headers['questionid&ap ...
Trying to execute a GET request and extract data from the response. this.http.get('http://localhost:8888/maneappback/more-items.php').subscribe(res => { console.log(res.json()); }, (err) => { console.log(err); }); An error message ...
Currently, I am in the process of constructing a sign-up form that will collect user input and then transition to a logged-in state with a template tailored specifically for this new user. To achieve this, my understanding is that I need to utilize ng-sub ...
I previously followed a coderwall tutorial on ajax but encountered an ActionController::UnknownFormat error when attempting to open the link in a new tab (Link Name). Can anyone help me figure out what's wrong? Thanks! Additionally, clicking the link ...
Just getting started with jquery and I'm attempting to parse a JSON object. This is my Jquery ajax call $(document).ready(function () { var resource = "v1/projects"; var url = '@Url.Action("Proxy")?resource=' + resource; ...
I am currently working on my website and this is the content I have in my body tag: #social-media { width: 175px; margin-left: auto; margin-right: auto; padding-top: 10%; } #social-media img { padding: 5px; } #soci ...
One interesting feature of jQuery is how the variable $ can function as both an object and a function. // For example, you can access object properties like $.fn; // or $.isReady; // You can also call the function $ like this $(); So, how can we make the ...
I created a modal that uses the following function to center itself: center: function() { var top=Math.max($window.height() - $modal.outerHeight(),0) / 2; var left=Math.max($window.width() - $modal.outerWidth(),0) / 2; $modal.css({ ...
I am currently working on incorporating the pdfmake package into my application. In order to load fonts, a list of URLs is required during initialization. However, the fonts I am using are managed by npm and Vite, so they do not have fixed URLs. Here' ...
I need assistance in creating an effect similar to the one found on this website - where clicking on a div opens a new page. ...
I have a situation where I need to make two loops work together. One loop contains buttons, while the other loop contains spans. The goal is that when I hover over a button, the corresponding span should change color. Both elements have a count that should ...
My task involves adding a collection of cards to the DOM. html <div class="card"> <div class="card-title">Card 1</div> <div class="card-subtext">This is card 1</div> </div> js let ...
Hi fellow developers, I could really use some assistance. I've been working on implementing the jquery galleryview plugin for my image gallery (check out my gallery here). Unfortunately, I'm running into an issue where the gallery is not loading ...
Currently, I am in the process of utilizing Tailwind packages for a Next.js application, however, I have encountered an issue that has proved to be quite challenging to resolve. Every time I attempt to add a "require" statement to my tailwind.config.js fil ...
I am looking for guidance on creating a page with specific functionalities. Here is what I have in mind: I want to implement a button that opens a popup when clicked. The popup should display static instructions and buttons for the user to progress throu ...
My objective is to achieve the following on click: Share the URL and text on Twitter in a popup window Receive a response from Twitter indicating whether the tweet was successful or failed Close the popup window after the tweet is successfully pos ...