javascript - 如何使用 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

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

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

或者更好的是，如果你想默认选择生产，你应该首先在 HTML 中添加类 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>