设置单选按钮引导程序

Question

我正在尝试使用 Jquery:

设置 bootstrap 单选按钮

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

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

jsfiddle

Answer 1

如何先删除数据切换，然后更改复选框，然后再次添加？

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

Answer 2

试试这个：

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

DEMO

Answer 3

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

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中已经提到了这个技巧。

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

设置单选按钮引导程序

Setting radio button boostrap

jquery

radio-button

twitter-bootstrap