模态按钮单击关闭模式和复选框检查已禁用

时间:2017-05-05 15:10:53

标签: javascript jquery twitter-bootstrap checkbox

我想创建我的复选框,以检查我的模态上的按钮何时单击而不是单击它。复选框已禁用且未选中。 按钮使模式关闭或关闭并自动检查复选框。我现在正在使用的底部的以下代码。

$("#checkbox").prop("disabled", true);
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<button class="btn btn-success btn-sm" data-toggle="modal" data-target="#myModal">
  Open Modal
</button>

 <div class="checkbox">
    <label>
      <input type="checkbox" id="checkbox" name="checkbox"> Check me out
    </label>
  </div>
  
<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
                <p>Ang Lorem Ipsum ay ginagamit na modelo ng industriya ng pagpriprint at pagtytypeset. Ang Lorem Ipsum ang naging regular na modelo simula pa noong 1500s, noong may isang di kilalang manlilimbag and kumuha ng galley ng type at ginulo ang pagkaka-ayos nito upang makagawa ng libro ng mga type specimen. Nalagpasan nito hindi lang limang siglo, kundi nalagpasan din nito ang paglaganap ng electronic typesetting at nanatiling parehas. Sumikat ito noong 1960s kasabay ng pag labas ng Letraset sheets na mayroong mga talata ng Lorem Ipsum, at kamakailan lang sa mga desktop publishing software tulad ng Aldus Pagemaker ginamit ang mga bersyon ng Lorem Ipsum.</p>
           
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success " data-dismiss="modal">Agree</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

1 个答案:

答案 0 :(得分:1)

要实现此目的,您可以将click事件处理程序挂钩到模式中的按钮,然后将复选框的checked属性设置为true,将disabled设置为{ {1}}。试试这个:

&#13;
&#13;
false
&#13;
var $checkbox = $("#checkbox").prop("disabled", true);

$('#myModal').on('click', '#agree-button', function() {
  $checkbox.prop({
    'checked': true,
    'disabled': false
  });
});
&#13;
&#13;
&#13;