Django/bootstrap 表单：如何设置和获取 btn-group 值

Question

我是初学者，使用 Python/Django/bootstrap。我用谷歌搜索并没有找到我问题的完整答案（代码示例）。

在一个表单上，我想使用 3 个分组按钮来显示和选择警报系统的状态，可以是：武装/回家/未武装 我使用下面的 HTML 代码：

 <div class="btn-group btn-group-lg">
  <button class="btn btn-default" type="button">
  <em class="glyphicon glyphicon-lock"></em> Armed
  </button> 
  <button class="btn btn-default" type="button">
  <em class="glyphicon glyphicon-lamp"></em> Home
  </button> 
  <button class="btn btn-default" type="button">
  <em class="glyphicon glyphicon-home"></em> Unarm
  </button> 
</div>

问题是如何：

1. 突出显示 3 按钮以显示警报状态 输入表格

2. 获取用户修改的按钮状态（武装/家庭/非武装） 离开表格时

您是否可以向我提供更新的 HTML 代码以及要添加的 urls.py 和 views.py 的代码。

Answer 1

根据documentation你可以这样做：

• 设置活动按钮：选择您感兴趣的按钮并添加活动类
• 保持类处于活动状态：点击时，您只能为单击的按钮保留活动状态（从所有其他类中删除该类）
• 获取活动按钮：选择具有活动类的按钮

演示：

//
// set the second button active on DomReady
//
$('.btn-group-lg button').eq(1).addClass("active");


//
// Preserve the active status only for the clicked button
//
$('.btn-group-lg button').on('click', function(e) {
  $('.btn-group-lg button').not(this).removeClass("active");
  $(this).addClass("active");
});


//
// get the active button
//
$('#btnGetActive').on('click', function(e) {
  var btnActive = $('.btn-group-lg button.active');
  console.log(btnActive.text().trim() + ' is the ' + btnActive.index() + ' active');
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="col-md-4">
    <button id="btnGetActive" class="btn btn-default" type="button">Get Active button</button>
</div>

<div class="btn-group btn-group-lg">
    <button class="btn btn-default" type="button">
        <em class="glyphicon glyphicon-lock"></em> Armed
    </button>
    <button class="btn btn-default" type="button">
        <em class="glyphicon glyphicon-lamp"></em> Home
    </button>
    <button class="btn btn-default" type="button">
        <em class="glyphicon glyphicon-home"></em> Unarm
    </button>
</div>