CODEWITHSUNDEEP
javascriptjquery
benjammin
benjammin

Reputation: 537

JQuery - Clicking on checkbox container works, clicking on checkbox doesn't

I am trying to create a dropdown menu that will allow users to select multiple options via checkboxes. I am using jQuery so that the user just has to click within the checkbox container (i.e. the checkbox text or the whitespace around the text) to mark the checkbox as checked or unchecked, w/o solely having to click on the checkbox exclusively: http://jsfiddle.net/nMKt2/

<script type="text/javascript">
            $(document).ready(function () {
                $(".dropdown-menu li").click(function () {
                    var cb = $(this).find('input:checkbox');
                    var chk = cb.prop("checked");
                    if (!chk) {
                        cb.prop("checked", true);
                    }
                    else {
                        cb.removeProp("checked");
                    }
                });
});

This works for the checkbox container, but it fails when you actually click on the checkbox itself! Actually clicking on the checkbox doesn't seem to trigger the toggle (you may have to open the jsfiddle in IE or Firefox to see this, as my version of Chrome didn't render this jsfiddle properly).

I am very new to jQuery/javascript, and so I'm sure I'm making an elementary mistake somewhere here. Another issue I don't know how to solve would be how to make the dropdown "sticky," so that it doesn't immediately disappear each time you check an option.

Any help you can offer would be greatly appreciated.

Upvotes: 1

Views: 1447

Answers (4)

Coby
Coby

Reputation: 1528

$(document).ready(function(){

    // Your code here.

    $('.dropdown-menu li input:checkbox').on('click', function(e){
        e.stopPropagation();
    });
});

Your event attached to the <li> also affects all child elements. So what happens is when you click on the checkbox to check/uncheck it, the event attached to the <li> is triggered, causing it to essentially reverse the check/uncheck action.

To remedy this, we add e.stopPropagation(); to the checkbox to prevent it firing any parent click events.

As an alternative, you may want to consider a non-JavaScript solution, wrapping the contents of the list item in a label as shown below. When you click anywhere inside the label, browsers will natively trigger the check/uncheck action of a nested checkbox.

<li>
    <label>
        <input type="checkbox" value="...">
        Checkbox
    </label>
</li>

UPDATE:

Since there are other click events (from Bootstrap) that you want to preserve, what you really want to do is just abort out of the current click event when you click directly on the checkbox.

$(document).ready(function () {
    $(".dropdown-menu li").on('click', function (e) {

        // If you clicked on the checkbox directly, abort.
        if ($(e.target).is('input'))
        {
            return;
        }

        var chk = $(this).find('input:checkbox').prop("checked");
        if (!chk) $(this).find('input:checkbox').prop("checked", true);
        else $(this).find('input:checkbox').removeProp("checked");
    });
});

Upvotes: 1

Umidbek
Umidbek

Reputation: 1504

Here: http://jsfiddle.net/umidbek_karimov/y84ne/

1: Wrap Your input[checkbox] in to label:

<label><input type="checkbox" value="App1" />App1</label>

2: Use .stopPropagation() method on click event:

$(document).ready(function () {
    $(".dropdown-menu li label").click(function (ev) {
        ev.stopPropagation();
    });
});

3: I also used display: block css property on labels

#advanced_options label {
    font-weight:normal !important;
    font-family: Tahoma, Geneva, sans-serif;
    display:block;
    cursor: pointer;
}

Upvotes: 3

martynas
martynas

Reputation: 12290

$('.dropdown-menu').on('click', 'input[type="checkbox"]', function(e) {
    e.stopPropagation();
});

DEMO

Upvotes: 1

Faris
Faris

Reputation: 917

The click event on the checkbox is propagating up to the container so technically the checkbox will get checked, then unchecked right away (or vise versa). You need to stop the event propagation on the click event for the checkbox.

Upvotes: 1

Related Questions