Флажок Bootstrap/переключатели не меняют значение <input>

Страница JavaScript для Bootstrap показывает неплохое использование кнопок для создания флажков и полей радио. Например, для флажка я могу написать

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary">
    <input type="checkbox"> Option 1
  </label>
</div>

Однако библиотека фактически не изменяет значение базового поля <input> - оно просто меняет, имеет ли поле <label> класс active. Я бы предположил, что он изменит атрибут checked на флажке. По-видимому, я не просто неправильно сконфигурировал - так работают примеры на сайте Bootstrap.

Это ожидаемое поведение? Если это так, это кажется бесполезным, поскольку люди захотят использовать поле флажка. Если нет, как правильно настроить флажки Bootstrap/radio buttons?

Ответ 1

Атрибут checked на входе не изменяется, потому что это не то, что изменяется при проверке ввода флажка - свойство DOM checked - это то, что изменяется (true или false), и Bootstrap обрабатывает это правильно (вы можете проверить элемент в Firebug и увидеть изменение свойства DOM при его переключении). Атрибут checked используется только для определения значения по умолчанию, когда DOM изначально отображается.

Это не особое поведение для кнопок Bootstrap, так как все флажки/радио работают.

Изменить: Снимок экрана Firebug

Ответ 2

Похоже, вам не хватает вызова "активировать" btn-group (документация). Вот демонстрация этой работы:

<form id='testForm'>
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-primary">
            <input type="checkbox" name='Option' value='1' />Option 1</label>
    </div>
</form>
<button class='btn' id='actionSubmit'>Submit</button>

<script>
    $('#actionSubmit').on('click', function (e) {
        e.preventDefault();
        alert($('#testForm').serialize());
    });

    $('.btn-group').button();
</script>

Ответ 3

Я делаю это так для MVC.NET, если кому-то это нужно:

@{       
    var removeSelected = Model.Remove == true ? "active" : "";
    var buttonText = Model.Remove == true ? "Add" : "Remove";

}

    @Html.HiddenFor(model => model.Remove)
    <div class="editor-field">
        <div class="btn-group" data-toggle="buttons-checkbox">
              <button type="button" id="RemoveButton" class="btn btn-primary @removeSelected" onclick="toggle();">@buttonText</button>  
        </div
    </div>


 function toggle() {
            var value = $("#Remove").val();
            if (value == "False") {
                $("#Remove").val("True");
                $("#RemoveButton").text("Add");
            }
            else {
                $("#Remove").val("False");
                $("#RemoveButton").text("Remove");
            }            
        }

И, наконец, не забудьте добавить ботстрап js refence.