Dropdown Circle Radio Button, Bootstrap… Active Buttons

Question

I've got some difficuties on putting Little Circle Input radio buttons on a dropdown menu and making it work. I'm new on Bootstrap, and once I was unable to do on a clean way, I start to try something not so clean.

What I want is something like this , but, for now, checked buttons don't change.

I try to change it, once it, only having the "input"s, none of buttons are checked.

I already had some problems trying to change the "active" element, and I have to make this explicity, but I think that is not supposed to do the way I'm doing. But, for now, change for the active style is working (despite a dirty way), but I was unable to do this for the checking circles of radio buttons, on dropdown menu.

<div id="MapOrig">
    <div class="btn-group">
        <button type="button" class="btn btn-primary btn-md dropdown-toggle" style="box-shadow: 2px 2px 1.5px #888888;" data-toggle="dropdown"><span class="glyphicon glyphicon-globe"></span></button>
        <ul class="dropdown-menu dropdown-menu-right dropdown-menu-form" role="menu">
            <li class="alone active">
                <a onclick="javascript:selectMapLayer(1)" href="#">
                    <input name="NNC" type="radio" checked=""><span> OpenStreetMap</a></li>
        <li class="alone"><a onclick="javascript:selectMapLayer(2)" href="#"><input name="NNC" type="radio"><span> Stamen Maps</span></a>
            </li>
            <li class="alone">
                <a onclick="javascript:selectMapLayer(3)" href="#">
                    <input name="NNC" type="radio"><span> Open Map Surfer</a></li>
        <li class="alone"><a onclick="javascript:selectMapLayer(4)" href="#"><input name="NNC" type="radio"><span> Bing Aerial</a></li>
        <li class="alone"><a onclick="javascript:selectMapLayer(5)" href="#"><input name="NNC" type="radio"><span> Bing Road</a></li>
        <li class="divider"></li>
        <li class="notalone active"><a onclick="javascript:selectMapLayer(6)" href="#"><input name="NC" type="radio" checked=""><span> No Nautical Charts</a></li>
        <li class="notalone"><a onclick="javascript:selectMapLayer(0)" href="#"><input name="NC" type="radio"><span> Nautical Charts</a></li>
    </ul>
    </div>
</div>

Then, I have this:

$('.notalone').click(function(e) {
    var $this = $(this);
    $('.notalone').removeClass('active');
    $('.notalone').find("input").removeAttr('checked');
    $this.find("input").attr('checked', '');
    $this.addClass('active');
    e.preventDefault();
});

$('.alone').click(function(e) {
    var $this = $(this);
    $('.alone').removeClass('active');
    $('.alone').find("input").removeAttr('checked');
    $this.find("input").attr('checked', '');
    $this.addClass('active');
    e.preventDefault();
});

Well, at the moment, I was unable to solve the situation

Answer 1

You are not setting the checked attribute correctly; use prop('checked', true) like this:

$('.notalone').find("input").prop('checked', false);
$this.find("input").prop('checked', true);