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>