Question

我在将Little Circle Input单选按钮放在下拉菜单上并使其正常工作时遇到了一些困难。我是关于Bootstrap的新手，一旦我无法以干净的方式做，我开始尝试一些不那么干净的东西。

我想要的是this，但是，目前，选中的按钮不会改变。

我尝试更改它，一旦它只有＃34;输入＆＃34; s，没有任何按钮被检查。

我在试图改变＆＃34;活跃＆＃34;时遇到了一些问题。元素，我必须明确表达，但我认为这不应该像我做的那样。但是，就目前而言，主动风格的改变是有效的（尽管方式很脏），但是我无法在下拉菜单上为单选按钮的检查圈做这个。

<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>

然后，我有这个：

$('.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();
});

那么，此刻，我无法解决问题

Answer 1

您没有正确设置checked属性;使用prop（'checked'，true），如下所示：

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

Dropdown Circle单选按钮，Bootstrap ...活动按钮

1 个答案: