2017-10-30 3 views
0

CheckboxesSwap-Kästchen einmal Checkbox

geprüft Ich habe diese Gruppe von Kontrollkästchen bekam. Sie entsprechen den Tagen, an denen Menschen für die Arbeit zur Verfügung stehen. Dieses System wird verwendet, um einen "Arbeitsplan" zu erstellen. Wenn der Chef jedoch ein Kontrollkästchen aktiviert (damit die Personen an diesem bestimmten Tag arbeiten), sollte es sich in ein Auswahlfeld ändern, damit der Chef erkennen kann, wo die Leute arbeiten werden.

Die Kontrollkästchen erhalten ihren Namen auf diese Weise: {UserID}_[]. Der Wert des Kontrollkästchens entspricht dem Wochentag (Montag -> 0, Dienstag -> 1, Mittwoch -> 2 usw.). Die Auswahlbox wird auf diese Weise hergestellt: {UserID}_select_[].

Ich habe versucht, den folgenden Typ von jquery Skript zu verwenden, um diese Funktion zu erhalten:

<script> 
    var userList = <?php echo json_encode($userIdList); ?>; 

    function swapInput(obj) { 
     for (var i in obj) { 
      $(document).ready(function() { 
       $("input[name='" + obj[i] + "_[]']").change(function() { 
        if ($(this).prop('checked')) { 
         $(this).hide(); 
         $('input[name="' + obj[i] + '_select_['$(this).val()']"]').show(); 
        } 
       } 
      } 
     } 
    } 

    swapInput(userList); 

</script> 

aber ich jquery ganz neu bin, so dass ich vielleicht etwas Hilfe dort brauchen. Ich erhalte ein PHP-Array von einer Datenbank, um alle Benutzer-IDs zu erhalten, von denen wir eine Verfügbarkeit haben. Dieser wird in eine jquery-Variable konvertiert. Ich versuche, dies zu durchlaufen, um jede einzelne ID zu erhalten, und mache eine Codezeile, um das Kontrollkästchen auszublenden. Obwohl .. es funktioniert nicht .. wie immer ...

Wenn ich den userIdList PHP Variable var_dump, das ist mein Ergebnis ist:

array(3) { [0]=> int(1) [1]=> int(2) [2]=> int(4) } 

Dies bedeutet, dass die Benutzer-ID der 1, 2 und 4. Aber wer kann mir beim jQuery-Teil helfen?

Antwort

1

angefügt einen super einfachen jquery code zu demonstrieren zeigen/verbergen wählen wenn toggeln checkbox. Hinweis Ich verwende id anstelle von name. Ein paar andere Dinge zu beachten:

  • ändern .change-.click.

  • Verschieben $(document).ready(function() außerhalb der for-Schleife, sollte es nur einmal ausführen.

$("#check").click(function(e) { 
 
    if ($(this).prop("checked")) { 
 
    $(this).hide(); 
 
    $("#select").show(); 
 
    } 
 
})
#select { 
 
    display: none; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
 
<input type="checkbox" id="check"> 
 
<select id="select"> 
 
    <option>Testing</option> 
 
</select> 
 
</body> 
 
</html>