尝试安装引导复选框，但它们没有出现答案

【问题标题】：Trying to install bootstrap checkbox and they do not appear尝试安装引导复选框，但它们没有出现
【发布时间】：2016-06-08 15:00:51
【问题描述】：

我正在显示权限页面，我希望复选框显示如下：https://vsn4ik.github.io/bootstrap-checkbox/#html-examples，但它似乎不适用于我的情况。

我的代码：

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Backend</title>
    <meta name="msapplication-TileColor" content="#5bc0de" />
    <meta name="msapplication-TileImage" content="<?php echo Config::get('url/base_url'); ?>img/metis-tile.png" />

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
    <script src="https://code.jquery.com/jquery-2.2.3.min.js" defer></script>
    <script src="<?php echo Config::get('url/base_url'); ?>js/dist/js/bootstrap-checkbox.min.js" defer></script>
  </head>
    <body>
        <div class="container">
            <div class="row">
                <h2>Administrator Permissions</h2>
                <div class="col-md-4">
                    <div class="form-group">
                    <?php foreach($array1 as $key => $value){?>
                            <br/><label><input type="checkbox" id="input-1" value="<?php echo $key;?>" <?php if(Permissions::adminHasPermission($key)) {echo "checked";}?> /> <?php echo $value; ?></label>

                            <script>
                                $('#input-1').checkboxpicker({
                                  html: true,
                                  offLabel: '<span class="glyphicon glyphicon-remove">',
                                  onLabel: '<span class="glyphicon glyphicon-ok">'
                                });
                            </script>
                    <?php } ?>
                    </div>
                </div>
                <div class="col-md-4">
                        <div class="form-group">
                        <?php foreach($array2 as $key => $value){?>
                            <br/><label><input type="checkbox" value="<?php echo $key;?>" <?php if(Permissions::adminHasPermission($key)) {echo "checked";}?> /> <?php echo $value; ?></label>
                        <?php } ?>
                        </div>
                </div>
                <div class="col-md-4">
                        <div class="form-group">
                        <?php foreach($array3 as $key => $value){?>
                            <br/><label><input type="checkbox" value="<?php echo $key;?>" <?php if(Permissions::adminHasPermission($key)) {echo "checked";}?> /> <?php echo $value; ?></label>
                        <?php } ?>
                        </div>
                </div>
            </div>

            <div class="row">
                <h2>Moderator Permissions</h2>
                <div class="col-md-4">
                    <div class="form-group">
                    <?php foreach($array1 as $key => $value){?>
                            <br/><label><input type="checkbox" value="<?php echo $key;?>" <?php if(Permissions::moderatorHasPermission($key)) {echo "checked";}?> > <?php echo $value; ?></label>
                    <?php } ?>
                    </div>
                </div>
                <div class="col-md-4">
                        <div class="form-group">
                        <?php foreach($array2 as $key => $value){?>
                            <br/><label><input type="checkbox" value="<?php echo $key;?>" <?php if(Permissions::moderatorHasPermission($key)) {echo "checked";}?> > <?php echo $value; ?></label>
                        <?php } ?>
                        </div>
                </div>
                <div class="col-md-4">
                        <div class="form-group">
                        <?php foreach($array3 as $key => $value){?>
                            <br/><label><input type="checkbox" value="<?php echo $key;?>" <?php if(Permissions::moderatorHasPermission($key)) {echo "checked";}?> > <?php echo $value; ?></label>
                        <?php } ?>
                        </div>
                </div>
            </div>
        </div>

    </body>
</html>

但仍然没有应用样式，它们看起来像普通的复选框。有什么我想念的想法吗？

【问题讨论】：

标签： javascript twitter-bootstrap checkbox

【解决方案1】：

您的代码中有几个问题。我尝试简化它：

<?php
$i = 1;
foreach ($array1 as $key => $value) {
    $checked = '';
    if (Permissions::adminHasPermission($key)) {
        $checked =  "checked";
    }
    ?>
    <br/>
    <label><input type="checkbox" id="input-<?php echo $i; ?>" name="something[]" value="<?php echo $key; ?>" <?php echo $checked; ?> /> <?php echo $value; ?></label>
    <?php
    $i++;
}
?>

<script>
 $(function() {

    $('input[type="checkbox"]').checkboxpicker({
        html: true,
        offLabel: '<span class="glyphicon glyphicon-remove">',
        onLabel: '<span class="glyphicon glyphicon-ok">'
    });
  })
</script>

首先，不要把脚本放到foreach中。你真的需要更多次吗？

其次，为 HTML 元素使用唯一 ID。

第三，给它添加一个名字，并把[]放在复选框的末尾，确保它会作为一个数组发布。

第四，将您的脚本放入$(function() { ... } ); 以确保它会在准备好的文档上运行。

试试看。

【讨论】：

非常感谢，虽然我问的是另一件事。
我明白了，但是评论太长了。可以肯定的是，一切都对了，去调试一下，问题出在哪里，第一步就是去掉已知的bug。因此，当您解决了这些问题时，请告诉我们，您现在的实际结果是什么。

【解决方案2】：

您需要在致电前致电<script src="https://code.jquery.com/jquery-2.2.3.min.js" defer></script>：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">

所以它看起来像这样：

<script src="https://code.jquery.com/jquery-2.2.3.min.js" defer></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">

【讨论】：

@BRG 你的问题解决了吗？