bootstrap data-toggle dropdown activated by radio button

Question

I'm trying to open a bootstrap dropdown by clicking on a radio button but as simple as that may sound, it is giving me a hell of a day.

According to Bootstrap, you can open the dropdown by use of hyperlink or button with data-toggle="dropdown" in it. You can also use $('.dropdown-toggle').dropdown() but the trigger must still have data-toggle="dropdown" for it to work.

The problem is, radio buttons do not allow data-toggle="dropdown" and if I wrap the radio option inside its own hyperlink tag and add the toggle to it, then the dropdown works, but not the radio button itself and I need both to work simultaneously. The radio button will perform an action meanwhile displaying a dropdown to allow for a secondary action.

I dumbed down the code to give a simpler example and replicate my problem. You can see in the CODEPEN that the dropdown works but the radio button does not show "Hello Offender". If you remove the <a>...</a> You will see the radio button work but not the dropdown. How can I get both to work?

Here is my code

        <div class="form-group widget-header-radio-group">
            <div class="radio-group inline-radio">
                <input id="individualForm" class="radio-custom " name="radio-group" type="radio" checked>
                <label for="individualForm" class="radio-custom-label">Individual</label>
            </div>
            <div class="radio-group inline-radio">
                <input id="businessForm" class="radio-custom" name="radio-group" type="radio">
                <label for="businessForm" class="radio-custom-label">Business</label>
            </div>
            <div class="radio-group inline-radio">
                <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
                    <input id="offenderForm" class="radio-custom" name="radio-group" type="radio">
                    <label for="offenderForm" class="radio-custom-label">Offender</label>
                    <ul class="dropdown-menu" id="dropdownMenu">
                        <li id="stateOff"><a href="#">State</a></li>
                        <li id="federalOff"><a href="#">Federal</a></li>
                        <li id="countyOff"><a href="#">County</a></li>
                    </ul>
                </a>
            </div>
        </div>

        <div id="indDemo" class=""> Hello Individual</div>  
        <div id="busDemo" class=""> Hello Business</div>    
        <div id="offDemo" class=""> Hello Offender</div>    

$(document).ready(function () {

    $('#busDemo').hide();
    $('#offDemo').hide();

    $('#individualForm').change(function () {
        if (this.checked) {
            $('#indDemo').show();
            $('#busDemo').hide();
            $('#offDemo').hide();
        }
    });

    $('#businessForm').change(function () {
        if (this.checked) {
            $('#busDemo').show();
            $('#indDemo').hide();
            $('#offDemo').hide();
        }
    });


    $('#offenderForm').change(function () {
        if (this.checked) {
            $('#offDemo').show();
            $('#indDemo').hide();
            $('#busDemo').hide();
        }
    });


});

See the CODEPEN here

Thanks!

Answer 1

Take out the radio button from inside the anchor, since the anchor is enveloping the radio button so the radio button change event is not being triggered. Modify the radio button change handler like this:

$('#offenderForm').change(function () {
        if (this.checked) {
            $('#offDemo').show();
            $('#indDemo').hide();
            $('#busDemo').hide();
            $(this).siblings('a.dropdown-toggle').click();
        }
    });

http://codepen.io/anon/pen/dXAQXX

EDIT: Add this to your javascript code:

$('a.dropdown-toggle').click(function(){
       $(this).siblings('input').click();
   });

That way when you click on the anchor, a click event on the radio button will be triggered. Likewise, when you click on the radio button, a click event on the anchor will be triggered

Answer 2

If the input field is inside the anchor the input field will never receive the change event. But you may delegate the event to the parent div and test if the anchor you are clicking contains the input element you are looking for:

 $(document).ready(function () { $('#busDemo').hide(); $('#offDemo').hide(); $('#individualForm').change(function () { if (this.checked) { $('#indDemo').show(); $('#busDemo').hide(); $('#offDemo').hide(); } }); $('#businessForm').change(function () { if (this.checked) { $('#busDemo').show(); $('#indDemo').hide(); $('#offDemo').hide(); } }); // delegate the event differently $('div.radio-group.inline-radio').on('click', 'a', function (e) { var offenderForm = document.getElementById('offenderForm'); if (this.contains(offenderForm)) { offenderForm.checked = !offenderForm.checked; if (offenderForm.checked) { $('#offDemo').show(); $('#indDemo').hide(); $('#busDemo').hide(); } } }); }); 

 .dropdown-menu{ left: 200px; top: 60px; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <!-- unchanged HTML --> <div class="container"> <div class="row"> <div class="col-xs-12"> <div class="form-group widget-header-radio-group"> <div class="radio-group inline-radio"> <input id="individualForm" class="radio-custom " name="radio-group" type="radio" checked> <label for="individualForm" class="radio-custom-label">Individual</label> </div> <div class="radio-group inline-radio"> <input id="businessForm" class="radio-custom" name="radio-group" type="radio"> <label for="businessForm" class="radio-custom-label">Business</label> </div> <div class="radio-group inline-radio"> <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true"> <input id="offenderForm" class="radio-custom" name="radio-group" type="radio"> <label for="offenderForm" class="radio-custom-label">Offender</label> <ul class="dropdown-menu" id="dropdownMenu"> <li id="stateOff"><a href="#">State</a></li> <li id="federalOff"><a href="#">Federal</a></li> <li id="countyOff"><a href="#">County</a></li> </ul> </a> </div> </div> </div> </div> <div calss="row"> <div class="col-xs-12"> <div id="indDemo" class=""> Hello Individual</div> <div id="busDemo" class=""> Hello Business</div> <div id="offDemo" class=""> Hello Offender</div> </div> </div> </div> 

Answer 3

try this one

 function hideAllbut(id) { $('#indDemo').hide(); $('#busDemo').hide(); $('#offDemo').hide(); $('.dropdown-menu').hide() if (id) $('#' + id).show(); } $('#individualForm').change(function() { hideAllbut('indDemo'); }); $('#businessForm').change(function() { hideAllbut('busDemo'); }); $('#offenderForm').click(function() { hideAllbut('offDemo'); $('.dropdown-menu').dropdown().show(); }); $('.dropdown-menu a').click(function() { $('#offDemoSub').html(this.innerHTML); $('.dropdown-menu').dropdown().hide(); }); hideAllbut('indDemo'); 

 .dropdown-menu { left: 150px !important; top: 60px !important; } #offDemoSub { padding-left: 20px } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <div class="container"> <div class="row"> <div class="col-xs-12"> <div class="form-group widget-header-radio-group"> <div class="radio-group inline-radio"> <input id="individualForm" class="radio-custom " name="radio-group" type="radio" checked> <label for="individualForm" class="radio-custom-label">Individual</label> </div> <div class="radio-group inline-radio"> <input id="businessForm" class="radio-custom" name="radio-group" type="radio"> <label for="businessForm" class="radio-custom-label">Business</label> </div> <div class="radio-group inline-radio"> <input id="offenderForm" class="radio-custom" name="radio-group" type="radio"> <label for="offenderForm" class="radio-custom-label">Offender</label> <ul class="dropdown-menu" id="dropdownMenu"> <li id="stateOff"><a href="#">State</a></li> <li id="federalOff"><a href="#">Federal</a></li> <li id="countyOff"><a href="#">County</a></li> </ul> </div> </div> </div> </div> <div calss="row"> <div class="col-xs-12"> <div id="indDemo" class=""> Hello Individual</div> <div id="busDemo" class=""> Hello Business</div> <div id="offDemo" class=""> Hello Offender <div id="offDemoSub" class=""></div> </div> </div> </div> </div>