Dropdown Circle单选按钮,引导程序..活动按钮



我在将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();
});

嗯,目前,我无法解决的情况

您没有正确设置选中的属性;像这样使用道具("检查",正确):

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

最新更新