TangoAlee TangoAlee - 20 days ago 4x
HTML Question

Django Bootstrap Data Toggle Radio Buttons Not working

I have a form - part of which is creating radio buttons to select from a group of choices called

. The Javascript and bootstrap CSS are being loaded properly (per Chrome anyway).

Here is the snippet for the template:

<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">


{% endfor %}

The end
result is here:


Once a button is clicked it doesn't stay highlighted
(as it does here: http://v4-alpha.getbootstrap.com/components/buttons/#checkbox-and-radio-buttons)

Not sure what I'm doing wrong!


Your problem is the boostrap libraries: here you can find your updated jsfiddle.

The snippet:

<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 for="id_tool_loc_1" class="btn btn-primary">T01
        <input id="id_tool_loc_1" name="tool_loc" type="radio" value="1">
    <label for="id_tool_loc_2" class="btn btn-primary">T02
        <input id="id_tool_loc_2" name="tool_loc" type="radio" value="2">