[英]Dropdown Circle Radio Button, Bootstrap… Active Buttons
I've got some difficuties on putting Little Circle Input radio buttons on a dropdown menu and making it work. 在将Little Circle Input单选按钮放在下拉菜单上并使之工作时,我有些困难。 I'm new on Bootstrap, and once I was unable to do on a clean way, I start to try something not so clean. 我是Bootstrap的新手,一旦我无法以干净的方式进行操作,便开始尝试不太干净的方法。
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 好吧,目前我无法解决这种情况
You are not setting the checked attribute correctly; 您没有正确设置选中的属性; use prop('checked', true) like this: 使用prop('checked',true)像这样:
$('.notalone').find("input").prop('checked', false);
$this.find("input").prop('checked', true);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.