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>

问题是如何：

突出显示3按钮以显示警报状态输入表格
获取用户修改的按钮状态（布防/归位/非武装）离开表格时

您是否有可能向我提供更新的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>

Django / bootstrap形式：如何设置和获取btn-group值

1 个答案: