如何使用jQuery在Bootstrap3中切换页面加载中的按钮组中的按钮

问题描述

我有一个如下所示的按钮组

I've a button group like below

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default">
        <input type="radio" name="environment" id="staging" value="staging" />Staging
    </label>
    <label class="btn btn-default">
        <input type="radio" name="environment" id="production" value="production" />Production
    </label>
</div>

我想在页面加载时切换到正式版.我正在做下面的事情来实现这一目标.

I want to toggle to production on page load. I'm doing below to achieve this.

$(document).ready(function() {
   $("#production").button('toggle');
}

但是什么也没发生.我该怎么办?另外，我如何知道哪个按钮处于活动状态?

But nothing is happening. How should I do this ? Also, how do I know which button is active ?

我正在将Bootstrap 3.3.2与Jquery 1.11.1一起使用

I'm using Bootstrap 3.3.2 with Jquery 1.11.1

推荐答案

按钮由label表示.因此，您要做的就是在父标签元素上调用button方法:

Button is represented by label. So all you need to do is to call button method on the parent label element:

$(document).ready(function() {
    $("#production").parent().button('toggle');
});

更好的是，如果要默认选择生产，则应首先在HTML中添加类active:

Or much better, if you want to make production selected by default you should add class active in HTML in the first place:

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default">
        <input type="radio" name="environment" id="staging" value="staging" />Staging
    </label>
    <label class="btn btn-default active">
        <input type="radio" name="environment" id="production" value="production" />Production
    </label>
</div>

这篇关于如何使用jQuery在Bootstrap3中切换页面加载中的按钮组中的按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！