首页 > 怎么让bootstrap的radio选中?

怎么让bootstrap的radio选中?

Hi.我用bootstrap (.form-group)的radio.想通过jq来选中它.
我尝试使用了

$('#my_radio').prop('checked',true);
$('#my_radio').attr('class','active');
$('#my_radio').attr('checked','checked');

结果均无法选中!
我该怎么办?


补充:

这是在bootstrap自动生成的,普通radio(no bootstrap)以上都是可以选中的.就是对bootsp不起作用....我手动在radio上增加了checked,reload page之后,是可以看见效果的.jq动态操作dom增加checked,则不行.

<span>
 <div class="iradio_minimal" aria-checked="false" aria-disabled="false" style="position: relative;"><input type="radio" name="selectType" value="css_url" id="radio_css_url" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"></ins></div>
 </span>

$('#my_radio').prop("checked", !$(this).prop("checked"));

首先 看下$('#my_radio') 是否能选中元素
再试下 $('#my_radio').click()


radio的选中状态用:
$('#my_radio').get(0).checked = true;

我的理解是:用jQuery的prop()方法和attr()方法改变的是操作对象的【状态】,而要真正选中radio/checkbox,需要改变的是它们的【属性】,所以应该先用get()方法先获取dom元素。

参考:

jQuery DOM 元素方法 - get() 方法
jQuery函数attr()和prop()的区别


高版本的jq建议使用prop来操作布尔值类型的属性。

$('#my_radio').prop('checked',true);

这个实现选中应该是没问题的,你可以打印一下这个radio的属性。


动态操作不行的话,你应该在动态生成之后再操作,一开始没生成的时候你应该也获取不到吧。


只差最后一步 .prop('checked', 'checked')

补充

$('#my_radio') 应该是没选着上radio,应该是radio的父级之类的


bootstrap 的 radio这块是很坑爹的,你看到的其实是input的父元素span(bootstrap自己生成的)的样式(模拟的input,然后把真实的input覆盖了),所以input这块展示出来的选中状态其实是由span是否有checked类决定,而不是input本身.
知道原因了那好办,你得分两步去处理:

1、给要选中的input 父span加checked类, 这块还有个蛋疼的地方,它生成的radio的结构是.radio>span>input,也就是说input外面包了两层元素,你单给父span加checked类还不行,还得把其他span.checked的元素移除checked类,所以这里找起来也挺恶心的。

2、给input 设置checked属性。

$('input').prop('checked',true).parent('span').addClass('checked');

我这里也试过了 $(input).trigger('click'); 妈的,竟然不生效. 而且$('.radio').trigger('click')也不生效,不知道它怎么写的,懒得看它源码了。bootstrap这坑,简直了

【热门文章】
【热门文章】