Bootstrap Checbox模式不起作用

Question

選中復選框時，引導模式復選框不起作用。

條件是當用戶單擊復選框時應顯示引導程序模式彈出窗口

Bootstrap版本3.3.6

jQuery版本2.1.3

 $(function() { $('#tos-checkbox').click(function() { if ($('#tos-checkbox').is(":checked")) { $('#tosmodal').modal('show'); }else { $('#tosmodal').modal('hide'); } }); }); 

 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <input id="tos-checkbox" type="checkbox"> <span>I agree to the Terms And Conditions.</span> <div class="modal fade" id="tosmodal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" >&times;</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <p>Some text in the modal.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal" >Close</button> </div> </div> </div> </div> </div> 

Answer 1

更改JQuery的順序。 將JQuery放在第一位

 $(function() { $('#tos-checkbox').click(function() { if ($('#tos-checkbox').is(":checked")) { $('#tosmodal').modal('show'); }else { $('#tosmodal').modal('hide'); } }); }); 

  <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <input id="tos-checkbox" type="checkbox"> <span>I agree to the Terms And Conditions.</span> <div class="modal fade" id="tosmodal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" >&times;</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <p>Some text in the modal.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal" >Close</button> </div> </div> </div> </div> </div> 

Answer 2

要使用bootstrap.js，需要JQUERY。 您需要重新排列調用bootstrap和jquery的順序的原因是， 需要在bootstrap.js之前先調用jquery 。 您的問題已得到回答。 我只想參加解釋。 希望能幫助到你。