javascript - How to properly disable spans used with input-group-addon - Stack Overflow

admin管理员组

文章数量:1315346

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 ponents is fairly mon. 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 ponent.

<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.

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 ponents is fairly mon. 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 ponent.

<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.

• javascript
• jquery
• html
• twitter-bootstrap

Share Improve this question Follow edited Mar 10, 2015 at 19:13 fumeng asked Mar 10, 2015 at 18:44 fumengfumeng 1,83055 gold badges2727 silver badges7171 bronze badges 1

• Temporarily hide the span with css and replace with an identical element that has an greyed out icon? – Mouser Commented Mar 10, 2015 at 18:48

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn./bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<script src="//maxcdn.bootstrapcdn./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>

本文标签： javascriptHow to properly disable spans used with inputgroupaddonStack Overflow