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');
}

但没有任何事情发生。我该怎么做？另外，我如何知道哪个按钮处于活动状态？

我正在使用带有Jquery 1.11.1的Bootstrap 3.3.2

Answer 1

按钮由label表示。所以你需要做的就是在父标签元素上调用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>

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

1 个答案: