The collapse feature of a Bootstrap 4 checkbox within a list-group-item is not working properly

Having trouble with a bootstrap 4 list-group-item and collapse function interaction.

The issue is that a checkbox within the list-group-item activates the collapse function when clicked, but it doesn't respond to being selected/unselected properly.

If there's a checkbox/radio in the list-group-item, how do I make it work independently from the collapsible button?

I want the functionality to remain the same, but is there a way to prevent the checkbox from triggering the collapse event?

Please take a look at the code:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div class="container">
    <div class="row">
        <div class="col">
            <div class="list-group mt-5">
                <a href="#" class="list-group-item list-group-item-action" data-toggle="collapse" data-target="#sample1" aria-expanded="false" aria-controls="sample1">
                    <div class="custom-control custom-checkbox float-left">
                        <input type="checkbox" class="custom-control-input" id="customCheck1">
                        <label class="custom-control-label" for="customCheck1"></label>
                    </div>
                    Cras justo odio
                </a>
                <div class="collapse mb-2" id="sample1">
                    <div class="card card-body">
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
                    </div>
                </div>
                <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
                <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
                <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
                <a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
            </div>
        </div>
    </div>
</div>
jqueryhtmlcsscheckboxbootstrap-4

Answer №1

The issue with the functionality not working lies in the fact that the label and checkbox are nested inside an anchor tag <a>, which is causing Bootstrap to prevent the click event from reaching the children elements. This results in the checkbox never getting checked because it doesn't receive the click event.

$('a').on('click', function(){ 
  // do the collapse stuff
  return false;
});

To resolve this, you can either move the label and checkbox outside of the <a> tag and adjust the styling accordingly, or you can use some JavaScript to manually check the checkbox when the label is clicked:

$('.list-group-item .custom-control-label').on('click', function(){
    var checkBox = $(this).prev('input'); 

  if($(checkBox).attr('checked'))
    $(checkBox).removeAttr('checked');
  else
    $(checkBox).attr('checked', 'checked');

    return false;

})

You can test this solution in action by visiting this JSFiddle link: https://jsfiddle.net/xnsm4adf/34/

Answer №2

To incorporate a click event with the list-group-item, use the following code:

$('.list-group-item').on('click', function() {
  var toggleInput = $(this).find('.custom-control-input');
  toggleInput.attr("checked", !toggleInput.attr("checked"));
})

View the outcome on CodePen: https://codepen.io/titan_dl_1904/pen/Brwdoq

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

Tabulator now maintains the position of the rightmost column when adjusting the width of table columns

Is there a way to keep the right most column in a fixed position when adjusting column sizes? Whenever I try to resize a column, the right most column moves along with it, causing a gap or horizontal scroll bar to appear. How can I adjust all the columns ...

javascriptcssreactjstabulator

Identifying when two separate browser windows are both open on the same website

Is it possible to detect when a user has my website open in one tab, then opens it in another tab? If so, I want to show a warning on the newly opened tab. Currently, I am implementing a solution where I send a "keep alive" ajax call every second to the s ...

javascriptphpjqueryajax

Switch out the specific content within the p tag

Looking to update the highlighted text within a p tag. The code below addresses handling new line characters, but for some reason the replacement is not working as expected. Check out the HTML snippet: <p id="1-pagedata"> (d) 3 sdsdsd random: Subj ...

javascriptjqueryhtmlreplace

Posting a form in ASP.net software by utilizing an element prefix of "ct100$"

I'm currently in the process of creating a website master page that includes a form for member login. Below is the markup from the master page: <form id="loginForm" action="account.aspx" method="POST"> <div class="div-topHead"> <input ...

c#jqueryasp.net.net

MVC error encountered when attempting to pass the parameter '&' results in failure

Encountered an error in MVC while passing '&' as a parameter, which fails to display the desired outcome. How can I address this issue with the following example? public IActionResult Create(int? idTrabalhador, [FromQuery]string GridState{} ...

javascripthtmlmodel-view-controllerasp.net-core

What is the proper way to correctly populate an input field with an empty value of ""?

I am having an issue where putting value="" inside the input is preventing me from filling in the username and password fields. When I remove the value="", I can fill in the fields, but with value="" present, nothing happens. {/* User */} <div class=" ...

reactjsbootstrap-4

`Modify the title property of raphael elements`

I am currently using raphael.js for drawing and I would like to customize the title attribute (such as changing color, font size, etc). circle.attr({ title: 'This is a circle.', fill: 'red' }); You can view my example on jsfi ...

htmltooltipraphaelcustomizationtitle

A guide to retrieve data attributes in Vue.js

When my button is clicked, a modal pops up with data passed through data attributes. The button code looks like this: <button class="edit-modal btn btn-info" data-toggle="modal" data-target="#editModal" :data-id=item.id ...

javascriptjquerytwitter-bootstrapvuejs2vue.js

Issues with Custom Cursor Getting Trapped in the Upper Left Corner

I’m having trouble creating a custom cursor with blend mode exclusion. I've tried a few methods, but for some reason, when I added a cursor with blend modes, it only appears in the top left corner of my page and doesn't move. I want it to be th ...

javascripthtmlcss

Is there a way to stop window.pageYOffset from resetting every time the page is rendered?

I've been working on a react component that changes the header based on the scroll event. By attaching an event handler and toggling a display class to show or hide certain elements depending on the scroll position. However, I've encountered som ...

javascriptcssreactjs

A guide on utilizing the index column for multiple tables using just one statement in the datatable js library

I've incorporated the datatable js for managing two tables on a single page. HTML <!-- Table#1 --> <table class="dataTable"> <thead> <tr> <td>#</td> <td>col1</td> </tr> &l ...

javascriptjquerydatatables

Enhance Your Website with Audio Recording Using PHP and jQuery

I am currently working on a running project and require audio recording capabilities. Can anyone advise me on how to record only voice and save it effectively? It would be highly appreciated if someone could recommend some jQuery plugins or provide me wit ...

phpjqueryaudioaudio-recording

Combining PHP and HTML: Utilizing nested foreach loops with interspersed HTML code

Attempting to create a layout of items using an Accordion arrangement (from Bootstrap) has led me to retrieve data from a pgsql db. Fortunately, the data retrieval process is successful. The challenge lies in displaying this data, as I am encountering an ...

phphtmlpostgresqltwitter-bootstrap-3

What is the best way to switch a set of buttons on and off?

I have a set of primary buttons, each with a group of nested secondary buttons. When a primary button is clicked, I want only its corresponding secondary buttons to be displayed. If the same primary button is clicked again, all its secondary buttons shoul ...

angularbuttonbootstrap-4

Ways to incorporate a floating label

https://i.sstatic.net/vwnjl.jpg Can anyone provide guidance on how to incorporate the floating label as depicted in the image? ...

htmlcss

Positioning multiple images in CSS

I am facing an issue with my background images where one of them is invisible and cannot be displayed. Additionally, the padding-top for the li a element seems to not be working properly. HTML: <ul class="menu"> <li class="item-101 current a ...

css

Transmitting information via Ajax, jquery, Node.js, and Express

Seeking assistance as I struggle to comprehend the process while trying to implement it based on various online resources. My carousel directs users right after signing up, and I aim to gather information about their profile through simple input questions. ...

javascriptjqueryajaxnode.jsexpress

The arrangement vanishes when using identical html/css coding

When using the same HTML/CSS coding, the layout disappears and appears misaligned on one page but works perfectly on another. The issue seems to be that the first section of the main area is getting a width of 938px instead of 5px. I've tried adding w ...

htmlcss

Show a dynamic Swiper carousel upon selecting a thumbnail in an image gallery

I am in the process of creating a thumbnail gallery that includes a slider feature using Swiper. The default setup has the slider hidden, and once an image is clicked, the slider should appear with the selected image. To close the slider and return to the ...

javascriptjquerycssswiper.js

The height on iPad Chrome is displaying incorrectly

iPad Pro(11-inch), iPadOS version: 16.6.1, Chrome version: 116.0.5845.177 I tried running a simple html file on my iPad and encountered an issue. Despite setting the height to 100vh, a vertical scrollbar appeared on the right side of the screen allowing ...

htmlcssiosgoogle-chromeipad