html - Django/bootstrap 表单 : how to set and get btn-group value

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>