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.

score 1 · Answer 1 · answered Jan 20 '18 at 15:50

1

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

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

answered Jan 20 '18 at 15:50

Kos

4,890
9
38
42

1

upvoting as it was the first correct answer as compared to @Eleazar below , approx 31 secs difference – Muhammad Omer Aslam Jan 20 '18 at 16:02
@MuhammadOmerAslam :-) – Ele Jan 20 '18 at 16:18

score 1 · Accepted Answer · edited Feb 28 '19 at 15:10

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>

score 0 · Answer 3 · answered Jan 20 '18 at 15:50

0

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

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

answered Jan 20 '18 at 15:50

nitte93

1,820
3
26
42

score 0 · Answer 4 · answered Oct 21 '19 at 04:30

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

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

4 Answers4