title: How to properly disable spans used with input-group-addon
body: <p>I'm using Bootstrap and I have a span with the input-group-addon class. As we're all aware, using add-ons with other components is fairly common. The problem I have is disabling the span that has this class after I've disabled the input its tied to. </p>
  
  <p>In my example, I use a calendar addon with a bootstrap datepicker component. </p>
  
  <pre><code>&lt;div class="input-group date"&gt;
  
      &lt;input type="text" class="form-control" id="dp1" /&gt;
  
      &lt;span class="input-group-addon" id="dp1Icon"&gt;&lt;img src="&lt;%=context%&gt;/images/calendar-glyph.png"&gt;&lt;/span&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>I define my Bootstrap datepicker as such: </p>
  
  <pre><code>var datePicker = $(".input-group.date").datepicker({myOptions});
  </code></pre>
  
  <p>Sometimes I disable my datepicker like this: </p>
  
  <pre><code>$("#dp1").prop("disabled", true);
  </code></pre>
  
  <p>But I can't disable the dp1Icon. I've researched quite a bit. First, there is no method "showing" in the bootstrap datepicker that'll allow me to trap and prevent default. </p>
  
  <p>Second, "pointer-events:none" doesn't work on IE. </p>
  
  <p>Third, using this won't work either: </p>
  
  <pre><code>$("#dp1Icon").click(function(e){// if it has a certain class, e.preventDefault()});
  </code></pre>
  
  <p>wont' work either. </p>
  
  <p>I can easily remove the click handler like this: </p>
  
  <pre><code>$("#dp1Icon").off("click");
  </code></pre>
  
  <p>But then how do I re-assign it to open up the datepicker again? This doesn't work: </p>
  
  <pre><code>$("#dp1Icon").on("click",$(".input-group.date").datepicker("show");
  </code></pre>
  
  <p>What solutions am I left with? Thanks for any helpful tips. </p>