bootstrap - javascript: modal icheck box not getting unchecked on closing

Question

I have the following html

<div class="modal inmodal" id="handleUserModal" tabindex="-1" role="dialog"  aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content animated fadeIn">
            <form class="form">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">Add user</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group row profile_field">
                        <label class="col-lg-3 col-form-label">First Name</label>
                        <div class="col-lg-9">
                            <input id="firstname" name="firstname" type="text" placeholder="First Name" class="form-control">
                        </div>
                    </div>
                    <div class="form-group row reset_password_field mb-0 mt-4">
                        <div class="col-lg-offset-2 col-lg-10">
                            <div class="i-checks reset_password_check" id="password_check">
                                <label> <input id="passresetcheck" type="checkbox" /> Reset password </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="saveButton">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

Now i have tried to the following to uncheck

using the id of the input

$('passresetcheck').prop('checked',false)

also

$('passresetcheck').attr('checked',false)

using modal id

$("#handleUserModal .modal-body").find('input:radio, input:checkbox').prop('checked', false);

Answer 1

Finally what worked for me, is also to remove the checked class

// this is for the input
$('#passresetcheck').prop('checked', false);

// this is to remove checked class
$("#password_check div").each(function(index,elem){
  if (elem.classList.contains("checked")) {
    elem.classList.remove("checked");
  }
})  

My observation what happens to html when we check

This is without any checking

<div class="form-group row reset_password_field mb-0 mt-4">
    <div class="col-lg-offset-2 col-lg-10">
        <div class="i-checks reset_password_check" id="password_check">
            <label> <input id="passresetcheck" type="checkbox" /> Reset password </label>
        </div>
    </div>
</div>

after checking it gets converted like this, it adds a class checked in the div inside i-checks

<div class="i-checks reset_password_check" id="password_check">
    <label class=""> 
        <div class="icheckbox_square-green checked" style="position: relative;">
            <input id="passresetcheck" type="checkbox" style="position: absolute; opacity: 0;">
            <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;"></ins>
        </div>
        Reset password 
    </label>
</div>

Answer 2

Always check first if you capture something or not. In your case $('passresetcheck') is undefined.

You need to search by ID using # symbol like here $('#passresetcheck'):

const checkbox = $('#passresetcheck')

checkbox.prop('checked', false)

setTimeout(() => checkbox.prop('checked', true), 2000)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal inmodal" id="handleUserModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content animated fadeIn">
      <form class="form">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
          <h4 class="modal-title">Add user</h4>
        </div>
        <div class="modal-body">
          <div class="form-group row profile_field">
            <label class="col-lg-3 col-form-label">First Name</label>
            <div class="col-lg-9">
              <input id="firstname" name="firstname" type="text" placeholder="First Name" class="form-control">
            </div>
          </div>
          <div class="form-group row reset_password_field mb-0 mt-4">
            <div class="col-lg-offset-2 col-lg-10">
              <div class="i-checks reset_password_check" id="password_check">
                <label> <input id="passresetcheck" type="checkbox" /> Reset password </label>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary" id="saveButton">Save</button>
        </div>
      </form>
    </div>
  </div>
</div>