Question

选中复选框后，

Bootstrap模式复选框无效。

条件是用户单击复选框时应显示bootstrap模式弹出窗口

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

JQUERY需要使用bootstrap.js。您需要重新排列调用bootstrap和jquery的顺序的原因是您需要在bootstrap.js之前先调用jquery 。你的问题得到了解答。我只是想参与解释。希望它有所帮助。

Bootstrap Checbox模式不起作用

2 个答案: