[英]How do I uncheck the checkbox after modal dialog button is clicked?
Here's my problem: 这是我的问题:
Fiddle here: https://www.bootply.com/jMryRDRZNT 在这里提琴: https : //www.bootply.com/jMryRDRZNT
I need to display a warning message when a user clicks a checkbox. 用户单击复选框时,我需要显示一条警告消息。 A modal dialog is then displayed where user can click 'I understand' and 'Cancel' When 'Cancel' button is clicked I want to uncheck the checkbox.
然后显示一个模式对话框,用户可以单击“我理解”和“取消”。单击“取消”按钮后,我要取消选中该复选框。
I try to do it this way: 我尝试这样做:
$('#btnModalCancel').click(function() {
$('chkImm').attr('checked', false);
});
tried also 'prop' instead of attr - still not working. 尝试也'prop'而不是attr-仍然无法正常工作。 It appears that after the dialog is displayed something is preventing the checkbox from changing.
似乎在显示对话框之后,某些东西阻止了复选框的更改。 I placed console.log('test') inside the function - it is called, but the checkbox is not getting unchecked... See the fiddle in the link above.
我将console.log('test')放在函数内-它被调用,但是复选框并未被选中...请参见上面链接中的小提琴。
$('#chkImm')
$('#chkImm')
prop
to change checked
state. prop
更改checked
状态。 $('#chkImm').prop('checked', false);
Your selector for chkImm
is wrong, use #chkImm
您的
chkImm
选择器错误,请使用#chkImm
For jQuery 1.6+ : 对于jQuery 1.6+:
.attr() is deprecated for properties; .attr()不推荐使用属性; use the new .prop() function instead as:
使用新的.prop()函数代替:
$('#myCheckbox').prop('checked', true); // Checks it
$('#myCheckbox').prop('checked', false); // Unchecks it
For jQuery < 1.6: 对于jQuery <1.6:
To check/uncheck a checkbox, use the attribute checked
and alter that. 要检查/取消选中复选框,使用属性
checked
和改变这一点。 With jQuery you can do: 使用jQuery,您可以执行以下操作:
$('#myCheckbox').attr('checked', true); // Checks it
$('#myCheckbox').attr('checked', false); // Unchecks it
Reference: https://stackoverflow.com/a/17420580/1715121 参考: https : //stackoverflow.com/a/17420580/1715121
$('#chkImm').on('change', function() { if ($(this).is(':checked')) { $("#myModal").modal({ backdrop: 'static', eyboard: false }); } }); $('#btnModalCancel').click(function() { $('#chkImm').attr('checked', false); });
<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> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <form class="form"> <input id="chkImm" type="checkbox"><label>Turn on</label> </form> </div> <div id="myModal" class="modal"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Предупреждение, вы уверены!</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>Блаблабла</p> </div> <div class="modal-footer"> <button type="button" id="btnModalAgree" class="btn btn-warning">Я уверен, и хочу продолжить</button> <button type="button" id="btnModalCancel" class="btn btn-secondary" data-dismiss="modal">Отмена</button> </div> </div> </div> </div>
Updated your code: https://www.bootply.com/GuRVklMhIa# 更新了您的代码: https : //www.bootply.com/GuRVklMhIa#
Try doing: document.getElementById("chkImm").checked = false; 尝试做:document.getElementById(“ chkImm”)。checked = false;
I've use this one to Show the modal: 我用这个来显示模态:
$('#myCheckbox').attr("checked", "checked");
but it' will not work if you're hiding the modal by this: 但是如果您通过以下方式隐藏模式,则将无法使用:
$('#myCheckbox').prop('checked', false);
So to show and hide properly, Both I'm using PROP method during Showing and Hiding. 因此,为了正确显示和隐藏,在显示和隐藏期间,我和我都使用了PROP方法。
$('#myCheckbox').prop('checked', false); //To Hide
$('#myCheckbox').prop('checked', false); //To Show
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.