Bootstrapで動的にフォームを作るとチェックボックスのラベルをクリックしても機能しない

投稿者: Anonymous

Twitter Bootstrapについてです。
Bootstrapのスタイルは、デフォルトで
チェックボックスのラベルをクリックすると(画像の「画像を削除する」のラベル)、
チェックボックスがtoggleされます。

画像

しかし、JSで動的にフォームを挿入した後のチェックボックスは、
ラベルをクリックしてもtoggleされません。

popoverなどの機能であれば、

$('[rel=popover]').popover();

などで、再度初期化できるかと思います。

そのようなフォームの動的な作成後に使用できるBootstrap内のJS
(ラベルクリックがJSでなされているかは不明ですが)はあるのでしょうか?

どのようにラベルのcheckboxのtoggleを有効化させればよいでしょうか?

===== 訂正 ======

同じページ上に同一のIDが存在したためでした。
もちろんformタグはそれぞれに分かれてます。

<div class="checkbox">
  <label for="course_enabled">
  <input name="course[enabled]" type="hidden" value="0" />
  <input checked="checked" id="course_enabled" name="course[enabled]" type="checkbox" value="1" /> 使用可能
  </label>
</div>

for attribute をなくせば可能かもしれません。)
Railsのフォーム生成のgemに依存しているため少し手こずりそうですが・・・
(別のラベルを作成してidとforを合わせれば動作しました。

勘違いだったため、別の問題なのでクローズします。

解決

jsによってformを生成して、そのチェックボックスのラベルをクリックしてもチェックのオン・オフが起こらない、ということですよね?

ためしに作成してみましたが、ラベルをクリックしても動作します(Chromeでのみ確認)

_x000D_

_x000D_

addform = function() {_x000D_
  var form = $('#target:first');_x000D_
  form.append('<form><label><input class="form-control checkbox" type="checkbox"/>abc</label></form>')_x000D_
}

_x000D_

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>_x000D_
<div id="target">_x000D_
</div>_x000D_
<button onclick="addform()">add form</button>

_x000D_

_x000D_

_x000D_

なにか違う点があればお知らせください。

それでも解決しないようでしたら試してはいませんが

  • css classを後から設定してみる
  • formを動的に生成ではなく非表示にしておく
  • チェックボックスなどのコントロールの生成を元々HTMLで用意しておいた非表示のチェックボックスのクローンで生成する( var newCheckbox=$("#templateCheckbox").clone(); )

という方法もなにか変化がおこるかもしれません。


fiddleに挙げたもののソース

<!DOCTYPE html>
<html>
<head lang="en">
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"/>
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <meta charset="UTF-8">
    <title></title>
    <script>
        addform = function(){
            var form = $('#target:first');
            form.append('<form><label><input class="form-control checkbox" type="checkbox"/>abc</label></form>')
        }
    </script>
</head>
<body>
<div id="target"></div>
<button onclick="addform()">add form</button>

</body>
</html>
回答者: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *