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();
});
I am working on a Rails application that contains some <li> elements with the CSS property display: none;. I want these elements to only appear on the page when they are being dragged. However, there are some elements that do not have the display: no ...
I am encountering an issue with my callback functions. The objective of my code is to send 16 GET requests to a REST API in order to retrieve 16 distinct JSON files. These JSON files are then supposed to be converted into dictionaries representing the foot ...
I have a basic HTML page that displays customer reports using a JavaScript function. The JavaScript makes an ajax call to retrieve the reports from a backend Spring REST API. In the Spring REST API, I have set up an endpoint "/api/saml" for authentication ...
I am currently facing an issue with displaying data from the API in a component. The request is being made from the parent page, but the loop to display the data is within the child component. Unfortunately, the data is not showing up on the parent page as ...
Currently, I am utilizing node-fetch to fetch an OAuth2 token from an OAuth2 GitHub App. The obtained token allows me to successfully retrieve user information from "https://api.github.com/user". However, I also require the email address, which necessitate ...
Encountering issues with Google Lighthouse and AMP Pages I have attempted various solutions but none seem to be working <link rel="preload" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,600,700,900&display=swap ...
I have a requirement where I need to handle multiple input checkboxes. The goal is to store the changed checkbox events in an array and then save them when the user submits the changes. <td><input type="checkbox" class="switch" ng-model="each_val ...
My current project involves the scenario where a user needs to choose a CSV file from their local system. It is then necessary for me to read the contents of this file and display them on a JQGrid. The catch? This all needs to work smoothly in Internet E ...
My Experience with JQuery UI Plugin For a while now, I've been utilizing the JQuery UI plugin to create dynamic dialog boxes that load content on the go. Imagine this scenario: I load an HTML document that showcases various selectable items with che ...
Is it possible for the form to be submitted with an array of checked values when a user clicks on a checkbox and saves? Each checked value should be saved in the database as a single row. I'm not sure if this is achievable, but I believe you might hav ...
Imagine a straightforward, horizontal navigation on a website: | Home | About | Products | Contact | Impress | ... or something like that... A rectangular element is positioned above the navigation. Now, I want this rectangle to automatically shift hori ...
On my website, I have an HTML table that displays images in a carousel with their respective positions. The table utilizes the jQuery .sortable() function to allow users to rearrange the images by dragging and dropping. When an image is moved to the top of ...
As a VueJS student, I'm struggling to display the distances from my JSON file in a table. What is the best way to retrieve and show all the distance data for "5" and "10" by both walking and driving? Should I use this code: this.concurrentsRows = JSO ...
I am seeking advice on how to align all the buttons in different cards, despite varying text lengths, to be in the same position at the end of each card. Here is an example of what I am aiming for. Below is my HTML and CSS code: * { margin: 0px; pad ...
I'm having trouble getting a sound effect to play consistently in my game whenever there is a hit. Sometimes the sound plays, other times it does not! Here is the code I am using: <script> var hitSound = new Audio(); function playEffectSound ...
I've been struggling with a parallax effect on my website. After seeing it work smoothly on other websites, I tried to implement it myself but couldn't quite get it right. The background image keeps moving when I scroll the page and I want it to ...
In this example: <?php $html='<p style="color:#eee;"> Test content 1. </p> <p dir="LTR" style="color:#f00;"> <span>Test content 2.</span> </p> <p style="color:#000;"> Test content 3. </p>' ?> ...
Here are two arrays I'm working with: arr1 = [ { "key1": "Value1" }, { "key2": "Value2" }, { "key3": "Test3" }, { ...
VB code Dim temp3 As String = dt.ToString() cmd.Connection = con con.Open() i = cmd.ExecuteNonQuery() con.Close() If i = 1 Then msg = "Record successfully inserted" ...
I am relatively new to GWT and have been exploring various options, but I have not yet found a solution to my issue. The challenge at hand involves developing a function schedule system in GWT, where I am working on designing the frontend. We currently ha ...