如果我想选中一个复选框,那么,如果在引导模式上单击“是”按钮,则必须选中复选框,如果单击了"NO“按钮,则保留未选中的复选框。
同样,如果想取消选中复选框,那么,如果在引导模式上单击“是”按钮,则复选框必须取消选中,如果单击了"NO“按钮,则保持选中状态。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<label class="checkbox-inline">
<input type="checkbox" value="" class="status">John Doe
</label>
<label class="checkbox-inline">
<input type="checkbox" value="" class="status" checked>James Doe
</label>
<!-- Activate -->
<div class="modal fade" id="activate" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Activate?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-yes" data-dismiss="modal">Yes</button>
<button type="button" class="btn btn-default btn-no" data-dismiss="modal">No</button> </div>
</div>
</div>
</div>
<!-- Deactivate -->
<div class="modal fade" id="deactivate" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Deactivate?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-yes" data-dismiss="modal">Yes</button>
<button type="button" class="btn btn-default btn-no" data-dismiss="modal">No</button> </div>
</div>
</div>
</div>
</div>JQUERY
$('.status').click(function(){
if($(this).is(':checked')) {
$('#activate').modal('show');
} else {
$('#deactivate').modal('show');
}
});JSFIDDLE
https://jsfiddle.net/br86rjby/
说点像这样的http://jsfiddle.net/dfKEZ/
但只有它应该是一种引导模式
谢谢你的帮助!
发布于 2017-05-11 13:47:42
您可以保存已单击的复选框并返回false以防止其更改状态。然后根据对话框中按下的按钮检查或取消选中:
var clickedCheckox;
$('.status').click(function(){
clickedCheckbox = $(this);
if(clickedCheckbox.is(':checked')) {
$('#activate').modal('show');
} else {
$('#deactivate').modal('show');
}
return false;
});
$("#activateBtn").click(function() {
clickedCheckbox.prop("checked", true);
});
$("#deactivateBtn").click(function() {
clickedCheckbox.prop("checked", false);
});<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<label class="checkbox-inline">
<input type="checkbox" id="checkboxJohn" value="" class="status">John Doe
</label>
<label class="checkbox-inline">
<input type="checkbox" id="checkboxJames" value="" class="status" checked>James Doe
</label>
<!-- Activate -->
<div class="modal fade" id="activate" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Activate?</p>
</div>
<div class="modal-footer">
<button id="activateBtn" type="button" class="btn btn-default btn-yes" data-dismiss="modal">Yes</button>
<button type="button" class="btn btn-default btn-no" data-dismiss="modal">No</button> </div>
</div>
</div>
</div>
<!-- Deactivate -->
<div class="modal fade" id="deactivate" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Deactivate?</p>
</div>
<div class="modal-footer">
<button id="deactivateBtn" type="button" class="btn btn-default btn-yes" data-dismiss="modal">Yes</button>
<button type="button" class="btn btn-default btn-no" data-dismiss="modal">No</button> </div>
</div>
</div>
</div>
</div>
发布于 2017-05-11 13:44:25
如果不希望复选框在单击时更改其状态,则应使用.preventDefault()
// variable will hold a checkbox:
var status_box = null;
$('.status').click(function(event){
event.preventDefault();
// set which checkbox has been clicked:
status_box = this;
if($(this).is(':checked')) {
$('#activate').modal('show');
} else {
$('#deactivate').modal('show');
}
});然后为模式内的按钮注册单击事件处理程序:
$('.btn-yes').click(function(){
$(status_box).prop('checked', !status_box.checked);
});或者,您可以通过将单击的复选框存储在status_box按钮的 attribute中来摆脱'.btn-yes'变量:
$('.status').click(function(event){
event.preventDefault();
$('.btn-yes').data('status_box', this);
$(this.checked ? '#activate' : '#deactivate').modal('show');
});
$('.btn-yes').click(function(){
var box = $(this).data('status_box');
box.checked = !box.checked;
});https://stackoverflow.com/questions/43916892
复制相似问题