jQuery addClass example

Change class name on click in jQuery

HTML

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>


<a class="btn" data-popover="popover" data-content="" data-id="" data-form="das" data-toggle="modal" data-target="#DownloadAsModal">Click to show modal</a>

<div class="modal fade modal-wide" id="DownloadAsModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">

        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Download Options</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <input type="checkbox" class="reset" /> I will always be reset <br/>
                <input type="checkbox" class="reset" /> So Will I<br/>
                <input type="checkbox" /> I will never be reset<br/>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="Convert">Convert</button>
                <button class="btn grey" type="button" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

// on show.bs.modal
// find all inputs with class="reset" (may be different for you)
// loop over each of them, reset prop to false

$('#DownloadAsModal').on('show.bs.modal', function () {
  $(this).find('input.reset').each(function(index, item){
    $(item).prop('checked',false);
  });
});