How do I uncheck the checkbox after modal dialog button is clicked?

Question

Here's my problem:

Fiddle here: 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. 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.

Answer 1

1. Correct selector for checkbox will be $('#chkImm')
2. Use prop to change checked state.

---

$('#chkImm').prop('checked', false);

Answer 2

Your selector for chkImm is wrong, use #chkImm

For jQuery 1.6+ :

.attr() is deprecated for properties; use the new .prop() function instead as:

$('#myCheckbox').prop('checked', true); // Checks it
$('#myCheckbox').prop('checked', false); // Unchecks it

For jQuery < 1.6:

To check/uncheck a checkbox, use the attribute checked and alter that. With jQuery you can do:

$('#myCheckbox').attr('checked', true); // Checks it
$('#myCheckbox').attr('checked', false); // Unchecks it

Reference: 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> 

Answer 3

Updated your code: https://www.bootply.com/GuRVklMhIa#

Try doing: document.getElementById("chkImm").checked = false;

Answer 4

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.

$('#myCheckbox').prop('checked', false); //To Hide
$('#myCheckbox').prop('checked', false); //To Show