Versucht, das Bootstrap-Kontrollkästchen zu installieren und sie erscheinen nicht

Ich zeige die Berechtigungsseite an und möchte, dass die Kontrollkästchen wie die folgenden aussehen: https://vsn4ik.github.io/bootstrap-checkbox/#html-examples, aber es scheint nicht an meinem Fall zu funktionieren.Versucht, das Bootstrap-Kontrollkästchen zu installieren und sie erscheinen nicht

Mein Code:

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

aber immer noch der Stil nicht angewendet wird, und sie sehen aus wie normale Kontrollkästchen. Irgendwelche Ideen, was ich vermisse?

Quelle

2016-06-07 BRG

Sie müssen <script src="https://code.jquery.com/jquery-2.2.3.min.js" defer></script> anrufen, bevor Sie anrufen:

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

so würde es so aussehen:

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

Quelle

2016-06-07 14:38:26

@BRG Haben Sie Ihr Problem behoben? –

Es gibt mehrere Probleme in Sie Code. Ich versuche, es zu vereinfachen:

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

Erstens, legen Sie nicht das Skript in die foreach. Brauchst du es wirklich öfter?

Zweitens, eindeutige ID für HTML-Elemente verwenden.

Drittens, fügen Sie einen Namen hinzu und setzen Sie [] am Ende der Checkboxen, um sicher zu sein, wird es als ein Array veröffentlicht.

Viertens, setzen Sie Ihr Skript in $(function() { ... });, um sicher zu sein, es wird auf Dokument bereit ausgeführt.

Versuchen Sie es.

Quelle

2016-06-07 14:44:59 vaso123

vielen Dank, obwohl ich eine andere Sache gefragt habe. – BRG

Ich sehe, aber das ist so lange für einen Kommentar. Um sicher zu sein, ist alles richtig, und zu debuggen, wo ist das Problem, der erste Schritt, um die bekannten Fehler zu entfernen. Also, wenn Sie diese Probleme behoben haben, sagen Sie uns einfach, was ist Ihr tatsächliches Ergebnis jetzt. – vaso123

Versucht, das Bootstrap-Kontrollkästchen zu installieren und sie erscheinen nicht

Antwort

Verwandte Themen