下拉圓圈單選按鈕，引導程序…活動按鈕

Question

在將Little Circle Input單選按鈕放在下拉菜單上並使之工作時，我有些困難。 我是Bootstrap的新手，一旦我無法以干凈的方式進行操作，便開始嘗試不太干凈的方法。

我想要的是像這樣 ，但是，就目前而言，檢查按鈕不會改變。

我嘗試更改它，一旦它只有“輸入”，則不檢查任何按鈕。

我在嘗試更改“活動”元素時已經遇到了一些問題，我必須對此進行明確說明，但是我認為這不應該按照我的方式進行。 但是，目前，可以更改活動樣式（盡管方法很臟），但是對於下拉菜單中的單選按鈕檢查框，我無法執行此操作。

<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

您沒有正確設置選中的屬性； 使用prop（'checked'，true）像這樣：

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