title: display a bootstrap modal if checkbox is checked
body: <p>I have a test page that when a user clicks on a form button, a bootstrap modal appears and displays a yes/no message to the user. It seems to be working OK.</p>
  
  <p><strong>However, I have been trying to change the code so that the bootstrap modal is displayed / triggered when the user checks a checkbox</strong>, but I am having trouble understanding the code I have.</p>
  
  <p>I am hoping someone can show me how to adapt my code so the checked checkbox triggers the modal display.</p>
  
  <p>Here is the script code that I have</p>
  
  <pre><code>&lt;script&gt;
      // START: photograph remove modal code.
      $('a[photograph-remove-confirm]').click(function(ev) {
  
          var href = $(this).attr('href');
  
          if (!$('#photographRemoveConfirmModal').length) {
  
              $('body').append('&lt;div id="photographRemoveConfirmModal" class="modal modal-confirm-small-width hide fade" role="dialog" aria-labelledby="miscConfirmLabel" aria-hidden="true"&gt;&lt;div class="modal-header"&gt;&lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&lt;icon class="icon-remove"&gt;&lt;/icon&gt;&lt;/button&gt;&lt;h4 class="modal-title" id="miscConfirmLabel"&gt;{% trans "Confirm" %} - {% trans "Remove" %} {% trans "Photograph" %}&lt;/h4&gt;&lt;/div&gt;&lt;div class="modal-body"&gt;&lt;/div&gt;&lt;div class="modal-footer"&gt;&lt;button class="btn" data-dismiss="modal" aria-hidden="true"&gt;{% trans "Cancel" %}&lt;/button&gt;&amp;nbsp;&amp;nbsp;&lt;a class="btn-u btn-u-blue" id="photographRemoveConfirmOK"&gt;{% trans "Remove" %} {% trans "Photograph" %}&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;');
  
          }
  
          $('#photographRemoveConfirmModal').find('.modal-body').text($(this).attr('photograph-remove-confirm'));
  
          $('#photographRemoveConfirmOK').attr('href', href);
  
          $('#photographRemoveConfirmModal').modal({show: true});
  
          return false;
  
      });
      // FINISH: photograph remove modal code.
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is the template button code that displays the modal when clicked:</p>
  
  <pre><code>&lt;a href="#" id="test_button" class="btn" photograph-remove-confirm="Your Photograph will be removed only after you save the form!"&gt;{% trans "Test" %}&lt;/a&gt;
  </code></pre>
  
  <p>Here is the template checkbox code that I want to use to trigger the modal:</p>
  
  <pre><code>&lt;input type="checkbox" id="id_remove_photograph" name="remove_photograph" class="checkbox_resize"  onchange="remove_photograph_change();"&gt; Remove Photograph&lt;/input&gt;
  </code></pre>
  
  <p>Here is the <code>onchange="remove_photograph_change"</code> function displayed in the checkbox above.</p>
  
  <pre><code>function remove_photograph_change() {
  
      if ($('#id_remove_photograph').is(':checked')) {
  
          // just some code
  
      }
  
  }
  </code></pre>