Checkboxen innerhalb der Modale Fehler mit checked

Question

Der Code sollte für sich sprechen. Ich benutze die gleiche Update-Funktion für beide Checkboxen, aber die außerhalb des Modals gibt erfolgreich aus, ob es aktiviert ist oder nicht, aber die Modalität nicht. Irgendeine Idee warum?

$("#nonModalCheckbox").on("click", update); 
 
$("#modalCheckbox").on("click", update); 
 
$("#modal_show").on("click", showModal); 
 

 
function showModal() { 
 
    $("#myModal").modal("show"); 
 
} 
 

 
function update() { 
 
    console.log($(this).prop("checked")) 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<input type="checkbox" id="nonModalCheckbox">test 
 
<div class="modal fade" id="myModal" role="dialog"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">&times; 
 
    </button> 
 
     <h4 class="modal-title">Title</h4> 
 
     </div> 
 
     <div class="modal-body" id="modal_body"> 
 
     <div class="checkbox" id="modalCheckbox"><label><input type="checkbox">modal test</label></div> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" id="apply">Apply</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<button id="modal_show">Show Modal!</button>

Answer 1

Sie haben die ID zugewiesen modalCheckbox statt checkbox innerhalb des modalen div. Das Folgende wird funktionieren.

<input type="checkbox" id="modalCheckbox">modal test</label> 

$(document).ready(function() { 
 
\t $("#nonModalCheckbox").on("click", update); 
 
\t $("#modalCheckbox").on("click", update); 
 
\t $("#modal_show").on("click", showModal); 
 

 
\t function showModal() { 
 
\t \t $("#myModal").modal("show"); 
 
\t } 
 

 
\t function update() { 
 
\t \t console.log($(this).prop("checked")) 
 
\t } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<input type="checkbox" id="nonModalCheckbox">test 
 
<div class="modal fade" id="myModal" role="dialog"> 
 
\t <div class="modal-dialog"> 
 
\t \t <div class="modal-content"> 
 
\t \t \t <div class="modal-header"> 
 
\t \t \t \t <button type="button" class="close" data-dismiss="modal">&times; 
 
\t \t \t \t </button> 
 
\t \t \t \t <h4 class="modal-title">Title</h4> 
 
\t \t \t </div> 
 
\t \t \t <div class="modal-body" id="modal_body"> 
 
\t \t \t \t <div class="checkbox"> 
 
\t \t \t \t \t <label> 
 
\t \t \t \t \t \t <input type="checkbox" id="modalCheckbox">modal test</label> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="modal-footer"> 
 
\t \t \t \t <button type="button" class="btn btn-default" id="apply">Apply</button> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</div> 
 
<button id="modal_show">Show Modal!</button>