Tips for permitting the "checking" of just a single checkbox

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');  
});

Answer №1

It shouldn't pose a problem to hide radio buttons, as long as it aligns with your goals rather than accessibility concerns.

Is that the outcome you are aiming for?

[name=items] {
  display: none;
}

label {
  display: block;
  padding-left: 1rem;
}

:checked + label::before {
  position: absolute;
  left: .4rem;
  content: '✓';
  font-weight: 600;
}
<input type="radio" name="items" id="item-1">
<label for="item-1">Item 1</label>
<input type="radio" name="items" id="item-2" checked>
<label for="item-2">Item 2</label>
<input type="radio" name="items" id="item-3">
<label for="item-3">Item 3</label>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Changing the orientation of a dropdown menu from horizontal to vertical

Hello, I am seeking assistance to transform the top dropdown menu layout into a vertical one similar to the menu on the left side. Any help would be greatly appreciated as I am running out of ideas! Thank you in advance! @charset "utf-8"; /* CSS Docum ...

Processing the results from a recursive function call in Node.js

I have an objects array that needs to be processed with delayed calls to an external server, then collect all results into an array for postprocessing. Here is an example: (async () => { const serverOperation = () => new Promise(resolve => setT ...

When scrolling, dynamically change the background color by adding a class

I am looking to achieve a scroll effect where the color of the menu buttons changes. Perhaps by adding a class when scrolling and hitting the element? Each menu button and corresponding div has a unique ID. Can anyone suggest what JavaScript code I should ...

Passing JSON data dynamically to create a chart with chartjs

I have also developed this project on codesandbox: https://codesandbox.io/s/bar-graph-9nr8u?file=/src/App.js:2394-3036 I possess JSON data and a Pie graph with labels including car, bikes, motor, and trucks. My goal is to display the total number of users ...

How can the background color of a DIV be altered based on the values of an array's minimum

Basically, I am fetching values from an array using AJAX. The background color will change from green to red based on the "aht_value". Currently, the colors are displaying correctly because I hardcoded the values in the calculation below. However, I want t ...

What is the process for implementing the sticky table header jQuery plugin?

I am looking to implement a sticky header on all tables in my web application, which is built on PHP. As the amount of data continues to grow, search results are fetching more records that may not be visible. I am primarily a PHP programmer and do not have ...

When the filter feGaussianBlur is applied to an SVG circle, it disappears on Safari but not on Chrome

While implementing the filter with feGaussianBlur to an SVG circle, I encountered a peculiar issue. It works perfectly on Chrome, but unfortunately, the circle disappears when viewed on Safari. https://i.sstatic.net/k916B.png https://i.sstatic.net/5Bfp9. ...

What is the best way to delete an item from a React array state?

In my Firebase database, I have an array stored under the root branch called Rooms. Within the app, there is a state named rooms which is also an array. I successfully set it up so that when a user enters a new room name and submits it, it gets added to th ...

App:// is where Electron and Vue API requests converge

Recently, I successfully integrated Electron into my Vue app with the help of the Vue CLI Plugin Electron Builder. During development, all API requests were properly directed to the address specified in my vue.config.js: proxy: { '^/api': ...

Link Quick Techniques

I currently have an Express server set up with CRUD methods My goal is to automatically trigger the get method whenever a post, put, or delete request is made. This will ensure that the view on the Front-end side gets updated accordingly. Below is an exc ...

The form action seems to be unresponsive when utilized within a vue-bootstrap form

I'm utilizing a form submission service called formsubmit.co, which allows forms to receive input data via email without the need to develop a backend for storing and transmitting data. Formsubmit handles all the storage and sending processes. Accordi ...

Dealing with throwing Exceptions in jest: A guide for developers

I have developed a method that throws an exception when the provided password does not match a regex pattern. I attempted to handle this in Jest. it('Should prevent insertion of a new user if the password doesn't match the regex', async () ...

Is there a way to efficiently manage multiple modules in AngularJS? I've put in a lot of effort, but while one module is functioning properly, the

angular .module('ApplicationOne',[]) .controller('myControllerOne', function($scope){ $scope.name = "Luther"; $scope.fname = "Martin"; $scope.ed = "B.TECH"; }); angular .module('App2&apos ...

Adjust the class based on the model's value in AngularJS

items = {'apple', 'banana', 'lemon', 'cat', 'dog', 'monkey', 'tom', 'john', 'baby'} html <div class="variable" ng-repeat="item in items">{{item}} </div> ...

Refresh the Vuex store using the main process of Electron

Is there a way to update a vuex store by committing changes from the main process? Here is an example: In the main thread: import store from '../store' ipc.on('someevent', (event, args) => { // do something with args store ...

Dealing with 401 Errors: Navigating Redirects using Vue.js and

Currently, I am utilizing Vue.js along with axios in an attempt to create a generic API object as shown below: import router from './router' import auth from './auth' const axios = require('axios') export const API = axios.c ...

Leverage Webpack's File-Loader to Import Images

I have implemented Webpack in my React application. I have added 'File-loader' & 'Url-loader' to my webpack configuration. But I am uncertain about how to connect images to my components. I'm storing the image source ('s ...

Exploring the capabilities of ECMAScript generators within the Intel XDK Simulator

I am attempting to utilize a generator that has been declared using function* in Intel XDK. The simulate function within XDK is said to be based on Chromium, though it's difficult to determine the specific version ('about' box and similar fe ...

Tips on sending form data, including a file, to Ajax using the onclick() method

My Modal Includes a Form: <div class="modal fade bs-example-modal-lg" id="myMODALTWO" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" id="form-content"> <div class="modal-dialog modal-lg" role="document"> ...

Injecting services into AngularJS controllers helps to provide the necessary dependencies

Greetings! Here is the code snippet for my service: angular.module('lucho1App').factory('ApiExample', ['$http', '$q', function($http, $q) { return { promiseToHaveData: function() { return $ht ...