394


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

![画像](https://i.stack.imgur.com/KtASg.png)

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

popoverなどの機能であれば、

[code]

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

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

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

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

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

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

[code]

    <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>
    
[/code]

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

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


CC BY-SA 3.0
2014-12-06T03:09:01.093
391
2019-12-13T13:47:16.293
2014-12-06T06:45:59.243
512
512
question
css bootstrap
Bootstrapで動的にフォームを作るとチェックボックスのラベルをクリックしても機能しない


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

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

[code]

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

[code]

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

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

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

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

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

* * *

fiddleに挙げたもののソース

[code]

    <!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>
    
[/code]


CC BY-SA 4.0
2014-12-06T04:05:30.907
394
2019-12-13T13:47:16.293
2019-12-13T13:47:16.293
32986
728
391
answer