web-dev-qa-db-ja.com

Bootstrapチェックボックス/ラジオボタンは<input>値を変更しません

BootstrapのJavaScriptページ は、ボタンを使用してチェックボックスとラジオフィールドのスタイルを設定することを示しています。たとえば、チェックボックスの場合、次のように書くことができます

<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チェックボックス/ラジオボタンを適切に構成するにはどうすればよいですか？

javascripthtmltwitter-bootstrapcheckboxradio-button
19
jameshfisher

入力のchecked属性は変更されません。これは、チェックボックスの入力がチェックされたときに変更されないためです-checked DOMプロパティが変更される（trueまたはfalse）、および= Bootstrapはこれを適切に処理します（Firebugで要素を検査し、切り替えたときにDOMプロパティが変化するのを確認できます）。checked属性は、DOMが最初にレンダリングされます。

チェックボックス/ラジオを使用してjs/jQueryを実行している場合は、これを覚えておいてください！プログラムでチェックボックスまたはラジオボタンをチェックする必要がある場合、$('input').attr('checked', 'checked');はジョブを完了させません。 $('input').prop('checked', true);は必要なものです。

これはBootstrapボタンの特別な動作ではありません。これがすべてのチェックボックス/ラジオの動作です。

編集： Firebugスクリーンショット

編集2：コメントからのテキストを追加しました。役立つようです。

36
tomaroo

btn-group（ documentation ）を「アクティブ化」する呼び出しが欠落しているようです。これは デモ この動作の：

<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>
2
Jason Sperske

誰かがそれを必要とする場合に備えて、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");
            }            
        }

そして最後にbootstrap js refenceを追加することを忘れないでください。

1
Sanchitos