Disable input-group-addon

Question

I would like to disable a datepicker when a checkbox is checked. But I can't disable the input-group-addon. Even if the text input is disabled, the user can click on the span and choose a date.

How can I disable it ?

Here's my html code :

<div class="col-md-4">
    <div class="control-group">
        <div class="input-group date" id="deb">
            <div class="input-group-addon">Du</div>
            <input id="dateDebut" type="text" class="form-control">
        </div>
    </div>
</div>
<div class="col-md-4">
    <div class="control-group">
        <div class="input-group date" id="end">
            <div class="input-group-addon">Au</div>
            <input id="dateFin" type="text" class="form-control">
        </div>
    </div>
</div>
<div class="col-md-3 checkbox">
    <label> <input id='toutVisu' type="checkbox">Visu</label> 
</div>

And here's my js code :

$('input#toutVisu').on('change', function(){

    if($(this).is(':checked')){
        $("div.date input").prop("disabled",true)
        $("div.date input").val("")

        msg = $('#messToutVisu').val()
        msgAlert = afficheAlert("danger",msg)
        $("div#histoRapport").append(msgAlert)
        deleteAlert()
    }else{
        $("div.date input").prop("disabled",false)
    }
})

I tried a lot of things to disable this input but nothing worked. So I let what was already made.

Thank you

Answer 1

 $('input#toutVisu').on('change', function(e) { var isDisabled = $(this).is(':checked'); $("#toDisable").prop("disabled", isDisabled) if(isDisabled){ $('#end, #deb').datepicker('remove'); }else{ $('#end, #deb').datepicker(); } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <fieldset id="toDisable"> <div class="col-md-4"> <div class="control-group"> <div class="input-group date" id="deb"> <div class="input-group-addon">Du</div> <input id="dateDebut" type="text" class="form-control"> </div> </div> </div> <div class="col-md-4"> <div class="control-group"> <div class="input-group date" id="end"> <div class="input-group-addon">Au</div> <input id="dateFin" type="text" class="form-control"> </div> </div> </div> </fieldset> <div class="col-md-3 checkbox"> <label> <input id='toutVisu' type="checkbox">Visu</label> </div> 

Answer 2

.unbind() to remove a previously-attached event handler from the elements.

 $('input#toutVisu').on('change', function(){ if($(this).is(':checked')){ $("div.date input").prop("disabled",true) $("div.date input").val("") $(".input-group-addon").unbind('click'); msg = $('#messToutVisu').val() msgAlert = afficheAlert("danger",msg) $("div#histoRapport").append(msgAlert) deleteAlert() }else{ $("div.date input").prop("disabled",false) } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <div class="col-md-4"> <div class="control-group"> <div class="input-group date" id="deb"> <div class="input-group-addon">Du</div> <input id="dateDebut" type="text" class="form-control"> </div> </div> </div> <div class="col-md-4"> <div class="control-group"> <div class="input-group date" id="end"> <div class="input-group-addon">Au</div> <input id="dateFin" type="text" class="form-control"> </div> </div> </div> <div class="col-md-3 checkbox"> <label> <input id='toutVisu' type="checkbox">Visu</label> </div> 

Answer 3

Attaching the event onchange might not work because change has to happen for onchange to fire.Try attaching an event on mousedown and touchend and call event.preventDefault() + event.stopImmediatePropagation() within them if the check box is checked.

Alternatively you can use the focusin event as well which fires before change

PS

based on what you post, I cannot see those spans, but a ssuming that they are the previousElementSibling of the input (you can simplify the below more but I write for a quick test for you):

$("div.date input").prev()
.on("touchend",function(e){
    if($('input#toutVisu').is(':checked')){
        e.preventDefault();
        e.stopImmediatePropagation();
        return false;
    }
}).on("mousedown",function(e){
   if($('input#toutVisu').is(':checked')){
        e.preventDefault();
        e.stopImmediatePropagation();
        return false;
   }
}).on("click",function(e){
   if($('input#toutVisu').is(':checked')){
        e.preventDefault();
        e.stopImmediatePropagation();
        return false;
   }
})

Add the above before you add any custom event handlers to these elements. YOu might need to call the above on touchstart but then chrome will complain that the event is passive, so you need to set it up before hand.