引导模态无法使用jQuery

Question

我创建了一个引导模态框和锚链接。 当我单击锚链接时，它是打开的模式弹出窗口。 单击链接锚链接以显示模式弹出窗口时，我编写了jquery。 谁能给我建议解决这个问题。

index.html

<div class="update-heading">Email Updates</div>
<div class="email_text">Please confirm which of the FREE email services you would like to receive from us, you can unsubscribe at any time:</div>
<div class="checkbox_list"><input type="checkbox" name="newsletter-daily" value="newsletter-daily" class="ind"><span> </span> <label style="width: 400px;">Compelo Energy Daily Update </label> <a  class="pview" data-toggle="modal" href="#mprof" >preview</a></div>
<div class="checkbox_list"><input type="checkbox" name="newsletter-weekly" value="newsletter-weekly"><span> </span> <label style="width: 400px;">Compelo Energy Weekly Round-up </label><a  class="pview" data-toggle="modal" href="#mprof" >preview</a></div>

Script.js

$(document).ready(function(){
        $(".pview").click(function(event){          
            if($(this).parent().find(':checkbox').is(':checked')){
                //alert('parent field is checked'); 
                $('#mprof').modal('show'); 
                console.log('if');
            }else{ 
                //alert('parent field is not hecked'); 
                $('#mprof').modal('hide');
                console.log('else');
            }
        });
    });

Answer 1

它不起作用，模态是一个html构造，您必须根据需要进行设置，因此您需要html作为模态，并更改javascript，因为您单击的是不正确的pview类。...尝试并查看差异...。再见...

    <div class="update-heading">Email Updates</div>
    <div class="email_text">Please confirm which of the FREE email services you would like to receive from us, you can unsubscribe at any time:</div>
    <div class="checkbox_list">
        <input type="checkbox" name="newsletter-daily" value="newsletter-daily" class="ind">
        <span> </span> <label style="width: 400px;">Compelo Energy Daily Update </label> 
    </div>
    <div class="checkbox_list">
        <input type="checkbox" name="newsletter-weekly" value="newsletter-weekly">
        <span> </span> <label style="width: 400px;">Compelo Energy Weekly Round-up </label>
    </div>

    <div class="modal bs-example-modal-md fade" id="mprof" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="myModalMprof" >
      <div class="modal-dialog modal-md" role="document">
        <div class="modal-content">
          <div class="modal-header"align="center">
            <h4 class="modal-title" id="myModalMprof">Modal</h4>
            <button type="button" class="close" data-dismiss="modal">
                <span aria-hidden="true">&times; </span>
                <span class="sr-only">Chiudi</span>
            </button>        
          </div>
          <b><div class="modal-body" id="contentModalMprof">
          </div></b>
          <div class="modal-footer">
          </div>
        </div>
      </div>
    </div>

JS：

    $(".checkbox_list").click(function(event){          
        if($(this).parent().find(':checkbox').is(':checked')){
            $('#contentModalMprof').html('preview'); 
            $('#mprof').modal('show'); 
        }else{ 
            $('#mprof').modal('hide');
        }
    });

我认为还有另一个问题，因为您正在执行``查找''复选框，并且如果已选中``模式打开''，则可以选中两个复选框，也许最好使用单选按钮，或者您必须执行js一次仅选中一个复选框。 ..或当您打开模式重置时，将复选框选中为false，重置为选中...