모달 내 체크 박스 체크 표시 오류 :

-1

코드 자체에 대해 설명해야합니다. 두 확인란 모두 동일한 업데이트 함수를 사용하고 있지만 모달 외부에있는 함수는 체크 여부에 관계없이 성공적으로 인쇄하지만 모달에있는 것은 아닙니다. 왜 그런가?모달 내 체크 박스 체크 표시 오류 :

$("#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>

출처

2017-10-26 zachvac

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

는'# modalCheckbox'이 DIV 체크 소품까지, 내부의 체크 박스에 더 수준을 드릴 다운하려고 기회가없는, 사업부이며, 그것은 좋은 것 가다 – Se0ng11

당신은 div에 대신 모달 내부 checkbox 할 수있는 ID modalCheckbox을 할당했다. 아래 내용이 적용됩니다.

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

출처

2017-10-26 03:54:01

모달 내 체크 박스 체크 표시 오류 :

답변

관련 문제