时间戳

首页 > 解决方案 > 根据控制器中的值更新按钮组检查状态

javascript - 根据控制器中的值更新按钮组检查状态

问题描述

我有按钮组作为过滤器，如下面的快照：

在此处输入图像描述

选择一个后，我通过调用控制器操作来更新我的过滤器对象。问题是，当我重新加载页面时，我的按钮组视图会回到初始状态。

我是 web 应用程序编程的新手，我不知道是否应该使用 html 帮助器将 html 组件与过滤器模型链接起来，或者只是使用 javascript onload 事件来填充我的按钮组。我已经测试了最后一个，但它不起作用。

window.onload = function() {
  document.getElementById("element2").checked = true;
}
<div id="session_group" class="filter-group">
  <label for="session_group" class="control-label col-sm-3">Session&nbsp;</label>
  <div class="btn-group user_toggle" data-toggle="buttons">
    <label class="btn btn-default btn-large btn-info active">
                <input type="radio" name="session_group_btn" id="element1" value="All" autocomplete="off">All
            </label>
    <label class="btn btn-default btn-large btn-info">
                <input type="radio" name="session_group_btn" id="element2" value="1" autocomplete="off">Automne
            </label>
    <label class="btn btn-default btn-large btn-info">
                <input type="radio" name="session_group_btn" id="element3" value="2" autocomplete="off">Automne A
            </label>
    <label class="btn btn-default btn-large btn-info">
                <input type="radio" name="session_group_btn" id="element4" value="3" autocomplete="off">Été
            </label>
    <label class="btn btn-default btn-large btn-info">
                <input type="radio" name="session_group_btn" id="element5" value="4" autocomplete="off">Été A
            </label>
    <label class="btn btn-default btn-large btn-info">
                <input type="radio" name="session_group_btn" id="element6" value="5" autocomplete="off">Printemps
            </label>
    <label class="btn btn-default btn-large btn-info">
                <input type="radio" name="session_group_btn" id="element7" value="6" autocomplete="off">Printemps/Été
            </label>
  </div>
</div>

感谢您的帮助。

标签： javascriptc#html

解决方案

要手动启用组中的按钮，需要使用 Bootstrap 按钮的切换方法$().button('toggle') 

$(document).ready(function{

    // Toggles push state. Gives the button the appearance that it has been activated.
    $("#element2").parent().button('toggle');

});

参考链接： https ://getbootstrap.com/docs/4.3/components/buttons/#checkbox-and-radio-buttons

推荐阅读