我有一个表单 - 其中一部分是创建单选按钮,以从一组名为"tool_loc"
的选项中进行选择。正确加载Javascript和bootstrap CSS(无论如何都是Chrome)。
以下是模板的摘录:
{{form.tool_loc.errors}}
<label for="{{form.tool_loc.id_for_label}}">Tool Location:</label>
<div class="btn-group" data-toggle="buttons">
{% for field in form.tool_loc %}
<label class="btn btn-primary">
{{field.choice_label}}
{{field.tag}}
</label>
{% endfor %}
</div>
结束HTML
结果在这里:
https://jsfiddle.net/6o84xLx2/2/
问题 单击按钮后,它不会保持突出显示 (就像它在这里:http://v4-alpha.getbootstrap.com/components/buttons/#checkbox-and-radio-buttons)
不确定我做错了什么!
答案 0 :(得分:1)
你的问题是boostrap库:here你可以找到你更新的jsfiddle。
摘录:
<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="btn-group" data-toggle="buttons">
<label for="id_tool_loc_0" class="btn btn-primary">---------
<input checked="checked" id="id_tool_loc_0" name="tool_loc" type="radio" value="">
</label>
<label for="id_tool_loc_1" class="btn btn-primary">T01
<input id="id_tool_loc_1" name="tool_loc" type="radio" value="1">
</label>
<label for="id_tool_loc_2" class="btn btn-primary">T02
<input id="id_tool_loc_2" name="tool_loc" type="radio" value="2">
</label>
</div>