How to properly disable spans used with input-group-addon

Question

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.

In my example, I use a calendar addon with a bootstrap datepicker component.

<div class="input-group date">

    <input type="text" class="form-control" id="dp1" />

    <span class="input-group-addon" id="dp1Icon"><img src="<%=context%>/images/calendar-glyph.png"></span>

</div>

I define my Bootstrap datepicker as such:

var datePicker = $(".input-group.date").datepicker({myOptions});

Sometimes I disable my datepicker like this:

$("#dp1").prop("disabled", true);

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.

Second, "pointer-events:none" doesn't work on IE.

Third, using this won't work either:

$("#dp1Icon").click(function(e){// if it has a certain class, e.preventDefault()});

wont' work either.

I can easily remove the click handler like this:

$("#dp1Icon").off("click");

But then how do I re-assign it to open up the datepicker again? This doesn't work:

$("#dp1Icon").on("click",$(".input-group.date").datepicker("show");

What solutions am I left with? Thanks for any helpful tips.

Answer 1

Proof of concept:

 $("#dp1Icon_blocked").off(); //remove all event function disable() { $("#dp1").prop("disabled", true); $("#dp1Icon").addClass("hidden"); $("#dp1Icon_blocked").removeClass("hidden") } function enable() { $("#dp1").prop("disabled", false); $("#dp1Icon").removeClass("hidden"); $("#dp1Icon_blocked").addClass("hidden") } //display purposes not part of the solution: $($("button")[0]).click(disable); $($("button")[1]).click(enable); 

 .hidden{ display: block; } .blocked { color: #c2c2c2 !important; /* The important overrides the settings from bootstrap */ cursor: not-allowed; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <div class="input-group date"> <input type="text" class="form-control" id="dp1" /> <span class="input-group-addon" id="dp1Icon">Date</span> <span class="input-group-addon blocked hidden" id="dp1Icon_blocked">Date</span> </div> <button>Disable</button><button>Enable</button>