设置单选按钮引导程序答案

【问题标题】：Setting radio button boostrap设置单选按钮引导程序
【发布时间】：2015-09-11 15:05:42
【问题描述】：

我正在尝试使用 Jquery 设置引导单选按钮：

setTimeout(function () {
    $("input[value='female']").prop('checked', true);
}, 1000);

不幸的是，它似乎只在我删除 data-toggle="buttons" 时才有效。请看一下jsfiddle。它适用于第二行单选按钮，但不适用于第一行。知道如何让它也适用于第一行吗？

jsfiddle

【问题讨论】：

那么需要数据切换吗？
我更喜欢第一排单选按钮的外观...
@Balachandran 不知道你的意思......据我所知，你只改变了女性。问题是如何以编程方式检查第一行按钮的一个（任何）按钮。超时只是为了让jsfiddle中的效果更明显。
jsfiddle.net/DTcHh/9183

标签： jquery twitter-bootstrap radio-button

【解决方案1】：

您可以通过将active 类添加到包含相应单选按钮的标签来手动覆盖切换效果。

JS 代码：

setTimeout(function () {
 $("input[value='female']").prop('checked', true);
 $("input[type='radio']").parent().removeClass('active');
 $("input[value='female']").parent().addClass('active');
}, 1000);

现场演示：https://jsfiddle.net/dreamweiver/DTcHh/9185/

Bootstrap docs 中已经提到了这个技巧。

来自引导程序： 视觉检查状态仅在点击时更新如果复选框按钮的选中状态在未触发按钮上的单击事件的情况下更新（例如，通过或通过设置输入的选中属性），您将需要自己切换输入标签上的 .active 类。

【讨论】：

【解决方案2】：

试试这个：

setTimeout(function () {
    $(".btn.btn-default:nth-child(1)").find("input").prop('checked', true).end().addClass("active");
}, 1000);

DEMO

【讨论】：

太棒了，谢谢。看起来关键是标签需要一个“活动”类才能显示为按下...

【解决方案3】：

先去掉data-toggle再修改checkbox再添加怎么样？

setTimeout(function () {
      $("input[value='female']").removeAttr('data-toggle');
      $("input[value='female']").prop('checked', true);
      $("input[value='female']").attr('data-toggle', true);
 }, 1000);

【讨论】：