Question

如何在复选框单击事件

上显示引导模式

<input type="checkbox" data-toggle="modal" data-target="#myModal">
<div id="myModal" class="modal fade" 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">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>

Answer 1

纠正第一行：

<input type="check box" data-toggle="modal" data-target="#myModal">

到此：

<input type="checkbox" data-toggle="modal" data-target="#myModal">

Answer 2

使用点击事件

<input type="checkbox" class="openmodal">
<div id="myModal" class="modal fade" 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">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>

JS：

 $('.openmodal').click(function(){
     $('#myModal').modal('toggle');//.modal('show')/.modal('hide');
    });

如果你想要更多的控制，可以使用if语句来测试它是否被检查

$('.openmodal').click(function(){
          if($(this).is(':checked')) {
             $('#myModal').modal('show');
           } else {
             $('#myModal').modal('hide');
           }
        });

如何在复选框单击事件上显示引导模式

2 个答案: