title: Disable lightbox with javascript
body: <p>I have an image that when clicked, will open up in a lightbox (script from <a href="http://lokeshdhakar.com/projects/lightbox2/" rel="nofollow noreferrer">http://lokeshdhakar.com/projects/lightbox2/</a>) and what I want to do is disable that from happening when a button is switched to off. (So clicking the image does nothing.)</p>
  
  <p>I've tried to use .off and .unbind following some other answers on the site to disable the lightbox but none of them are working for me.
  I have also followed <a href="https://stackoverflow.com/questions/3788946/how-do-i-dynamically-enable-disable-links-with-jquery">How do I dynamically enable/disable links with jQuery?</a> as suggested but have had no luck.</p>
  
  <p>Below is the HTML.</p>
  
  <pre><code>&lt;div style="margin-left:10%;padding:1px 16px;"&gt;
    &lt;section id="four_columns"&gt;
      &lt;article class="img-item"&gt;
        &lt;figure&gt;
          &lt;a href="img/livingroom.jpg" data-lightbox="livingroom"&gt;&lt;img id="img_window1" src="img/livingroom.jpg" width="200" height="120"&gt;&lt;/a&gt;
          &lt;figcaption&gt;
            &lt;strong&gt;Living Room 
              &lt;div class="onoffswitch"&gt;
                &lt;input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="window1" value="window1" checked&gt;
                  &lt;label class="onoffswitch-label" for="window1"&gt;
                    &lt;span class="onoffswitch-inner"&gt;&lt;/span&gt;
                    &lt;span class="onoffswitch-switch"&gt;&lt;/span&gt;
                  &lt;/label&gt;
              &lt;/div&gt;
            &lt;/strong&gt;
          &lt;/figcaption&gt;
        &lt;/figure&gt;
      &lt;/article&gt;
  ...
  </code></pre>
  
  <p>and javascript</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
    $(document).ready(function() {
    var full_opacity = 1;
    var faded_opacity = 0.3;
    var fade_speed = 'fast';              
    var objid;
  
    $('input[name="onoffswitch"]').each(function() {
      objid = "#img_" + $(this).val();
  
      if($(this).prop('checked')) {
          $(objid).css('opacity', full_opacity);
      }
      else {
          $(objid).css('opacity', faded_opacity);
      }
  });
  
  $('input[name="onoffswitch"]').change(function() {
      var objid = "#img_" + $(this).val();
      console.log($(this).prop('checked'));
      if($(this).prop('checked')) {
          $(objid).fadeTo(fade_speed, full_opacity);
          }
          else {
              $(objid).fadeTo(fade_speed, faded_opacity);
              $(objid).parent().unbind('click'); /* Here is where I want to implement the code. */
          }
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Any help would be appreciated.</p>