Блог

У меня есть форма, частью которой является создание переключателей для выбора из группы вызываемых "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 )

Не уверен, что я делаю неправильно!

Ваша проблема в библиотеках boostrap: здесь вы можете найти обновленный 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>