尝试安装引导复选框，但未显示

>我正在显示权限页面，我希望复选框显示如下： 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>

但样式仍未应用，它们看起来像普通复选框。知道我错过了什么吗？

代码中有几个问题。我试图简化它：

<?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>

首先，不要把剧本放进去。你真的需要更多次吗？

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

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

第四，把你的脚本放在里面$(function() { ... } );以确保它将在文档准备就绪时运行。

试试吧。

您需要在调用之前致电<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">

相关内容

最新更新

热门标签：