3

I'm using the bootstrap radio buttons and would like to allow deselection of a radio group. This can be done using an extra button (Fiddle). Instead of an extra button, however, I would like to deselect a selected radio option if the option is clicked when it's active.

I have tried this

$(".btn-group label").on("click", function(e) { 

    var clickedLabel = $(this);

        if ($(clickedLabel).hasClass("active"))
        {
            // an active option was clicked => deselect it
            $(clickedLabel).children("input:radio").prop("checked", false)
            $(clickedLabel).removeClass("active");
        }
    }
)

but there seems to be a race condition: the event of clicking the label that I use seems to be used by bootstrap.js to set the clicked label option to "active". If I introduce a timeout, the class "active" is removed successfully:

$(".btn-group label").on("click", function(e) { 

    var clickedLabel = $(this);

        if ($(clickedLabel).hasClass("active"))
        {
            setTimeout(function() {
                // an active option was clicked => deselect it
                $(clickedLabel).children("input:radio").prop("checked", false)
                $(clickedLabel).removeClass("active");
            }, 500)
        }
    }
)

How can I toggle a selected option successfully without using a timeout?? Thank you for help.

peter
  • 2,103
  • 7
  • 25
  • 51
  • 1
    See http://stackoverflow.com/questions/17120576/how-to-uncheck-checked-radio-button – Chris Nov 24 '15 at 13:59
  • Chris, this works for regular radio buttons, not for the bootstrap buttons (they have a label around the input). – peter Nov 24 '15 at 14:01

2 Answers2

3

Instead of using two method's preventDefault & stopPropagation, use return false, will work same.

The difference is that return false; takes things a bit further in that it also prevents that event from propagating (or "bubbling up") the DOM. The you-may-not-know-this bit is that whenever an event happens on an element, that event is triggered on every single parent element as well.

$(".btn-group label").on("click", function(e) { 

    var clickedLabel = $(this);



          if ($(clickedLabel).hasClass("active"))
            {
                // an active option was clicked => deselect it
                $(clickedLabel).children("input:radio").prop("checked", false)
                $(clickedLabel).removeClass("active");
                return false;
            }
        });
Deepanshu Gupta
  • 240
  • 1
  • 5
2

After messing with your code in jsfiddle for a while I figured out that a combination of preventDefault() and stopPropagation() does the trick.

Here's a fiddle

and the code:

$(".btn-group label").on("click", function(e) { 

    var clickedLabel = $(this);

        if ($(clickedLabel).hasClass("active"))
        {
            // an active option was clicked => deselect it
            $(clickedLabel).children("input:radio").prop("checked", false)
            $(clickedLabel).removeClass("active");
            e.preventDefault();
            e.stopPropagation();
        }
    }
);
spaniol6
  • 606
  • 5
  • 13