如何使用 jquery 在 bootstrap3 中的页面加载时切换按钮组中的按钮

Question

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

<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>

我想在页面加载时切换到生产模式。我正在做下面的事情来实现这一点。

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

但是什么也没有发生。我应该怎么做？另外，我怎么知道哪个按钮处于活动状态？

我正在使用 Bootstrap 3.3.2 和 Jquery 1.11.1

Answer 1

按钮由 label 表示。所以你需要做的就是在父标签元素上调用 button 方法：

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

或者更好，如果你想默认选择生产，你应该在 HTML 中首先添加 class active：

<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 中的页面加载时切换按钮组中的按钮

How to toggle button in button-group on page load in bootstrap3 with jquery

javascript

jquery

twitter-bootstrap-3