activer / desactiver mes bouton avec checkbox

Bonjour
j'ai un probleme avec un evennement javvascript que je ne comprend lequel
mon projet c'est de gerer des appel telephonique entrant grace a un l'api switchvox.
dans mon application, jenvoi des requette sur l'api qui me retourne du json
moi je recupere le json que je range dans ma base de donnée.
sur une page web, je veux lister les appel entrant et de maniere a ne pas recharger ma page

page web:

@extends('layouts.app')
@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">Tableau de bord</div>

                <div class="panel-body">
                    @if (session('status'))
                        <div class="alert alert-success">
                            {{ session('status') }}
                        </div>
                    @endif
<!-- Styles -->
  <link rel="stylesheet" href="css/bootstrap.min.css">
    <link href="{{ asset('css/ccibf_css.css') }}" rel="stylesheet">

    <div id="centralacc">
<div id="menu">
@include('includes/afficheur')
    <!--fin du menu-->
</div>
 <div id="titre_milieu_accueil">

<button type="button" class="btn btn-basic" id="btn-create-note" disabled>
      <span class="glyphicon glyphicon-tags"></span> Joindre une note
    </button>

<div id="historiquejour">

</div>

    <!-- Scripts -->
    <script src="{{ asset('js/bootstrap.js') }}"></script>
  <script src="js/bootstrap.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="{{ asset('js/XHR.js') }}"></script>
    <script src="{{ asset('js/UpdateFichierJsonAndBD.js') }}"></script>
    <script src="{{ asset('js/DoPostCallQueue.js') }}"></script>
    <script src="{{ asset('js/UpdateCallCurrent.js') }}"></script>
    <script src="{{ asset('js/UpdateCallQueueIntoView.js') }}"></script>
    <script src="{{ asset('js/UpdateCallHistoriqueJourintoInterface.js') }}"></script>
    <script src="{{ asset('js/UpdateAllProcess.js') }}"></script>
    <script src="{{ asset('js/fonction.js') }}"></script>

    <script type="text/javascript">
        $("#checkbox").click(function() {
            $("#btn-create-note").attr("disabled", !this.checked);
        });
    </script>

 </div>
 <div id="clear"> </div>
 </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

donc pour cela jutulise du jquery
fichier js (mon fichier est appeler chaque seconde par un timer: setInterval('UpdateCallHistoriqueJourintoInterface()', 1000);)

var UpdateCallHistoriqueJourintoInterface = function(){
    xmlHttp.onreadystatechange = function(){
      if(xmlHttp.readyState==4){
        if(xmlHttp.status==200){
            response = xmlHttp.responseText;
            //alert(response)
            document.getElementById("historiquejour").innerHTML = response;
        }else{
          alert("Erreur au niveau de la lecture de données");
        }
      }
    }
    xmlHttp.open("GET", "UpdateCallHistoriqueJourTraitement?updatecallHistoriqueJourintointerface=updatecallHistoriqueJourintointerface", true);
    xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xmlHttp.send(null);
}

mon script jquery envoi une requette a mon controlleur qui recupere la liste des appels
mon controlleur retour le tableau quil a trouver au jquery
mon controlleur php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Appel;
use App\Vardump;
use App\Extension;

class UpdateCallHistoriqueJourTraitementControlleur extends Controller
{
    //
    public function index(){
        $update = isset($_GET['updatecallHistoriqueJourintointerface'])? $_GET['updatecallHistoriqueJourintointerface']:''; 
        if($update!='' && strcmp($update, "updatecallHistoriqueJourintointerface")==0){ 
                $tableau_historique = "
                <table class=\"table table-striped table-bordered table-hover table-condensed\">
                <thead>
                  <tr>    <th>#</th>   <th>Numero</th>  <th>Nom & prénom</th>  <th>Heure</th> <th>Durée</th>   </tr>
                </thead>
                <tbody>";
            $appels = Appel::where('uniqueid', '!=', '')
                    ->orderBy('dateheure_onincomingcall', 'desc')
                    ->get();
                    $i = 0;
            if(count($appels)>0){
                foreach ($appels as $appel) {
                    # code...
                    if(strcmp(substr($appel->dateheure_onincomingcall, 0, -9), date("Y-m-d"))==0)
                    {
                        $i++;
                        $heure = substr($appel->dateheure_onincomingcall, 10);
                        //determiner la durée de lappel:
                        //si le champ dateheure_appelcouper n'est pas vide alors c dateheure_onincomingcall - dateheure_appelcouper!
                        //si le champ dateheure_appelcouper est pas vide alors c dateheure_onincomingcall - dateheure_appelracrocher !
                        if($appel->dateheure_appelcouper!=NULL){
                            $dateheure_onincomingcall = strtotime($appel->dateheure_onincomingcall);
                            $dateheure_appelcouper = strtotime($appel->dateheure_appelcouper);
                            $interval_temps_seconde = $dateheure_appelcouper - $dateheure_onincomingcall;
                        }else {
                            # code...
                            $dateheure_appelracrocher = strtotime($appel->dateheure_appelracrocher);
                            $interval_temps_seconde = $dateheure_appelracrocher- $appel->dateheure_onincomingcall;
                        }
                        $duree = date('H:i:s', $interval_temps_seconde);
                        $tableau_historique .= '
                        <tr>   
                        <td><div class="checkbox" style="display: inline;"> <label><input type="checkbox" id="checkbox" value=""></label> </div></td> 
                        <td>'.     $appel->caller_id_number  .' </td>
                        <td>'.     $appel->caller_id_name  .'   </td>
                        <td> '.    $heure   .' </td>
                        <td> '.   $duree  .' </td>
                        </tr>  ';
                    }
                }
            }
            if($i==0){
                $tableau_historique .= "  <tr>  <td colspan=\"5\" align=\"center\"> <i>Aucun Appel dans l'historique!</i> </td>  </tr>  ";
            }
            $tableau_historique .= "
                  </tbody>
                </table>";

             echo $tableau_historique;
        }
   } 
}

mon script jquery se charge maintenant de changer le contenu de ma div en mettant le nouveau tableau obtenu
mon nouveau tableau inclu un checkbox je le precise,
pour chaque appel lister je veux pouvoir faire des actions (modifier supprimer, etc...)
je voudrais disabled les actions (modifier, supprimer) au chargement de ma page web
et que l'utulisateur ai a coche un checkbox avant que les boutons (modifier, supprimer) soit enable.
pour cela voici mes script:
mon probleme est que quand je clique sur un checkbox, rien ne se passe, mon bouton ne s'active pas!
j'ai tester en vain, avant cetai un probleme avec mon script jquery mais jai eu la certitude que le script marche bien:

<script type="text/javascript">
        $("#checkbox").click(function() {
            $("#btn-create-note").attr("disabled", !this.checked);
        });
    </script>

la preuve,
quand je consoit un simple checkbox a coté dans ma div historiquejour, se checkbox interagit bien avec mon bouton
mais pour les chackbon venu de mon controlleur par echo et que j'ai placer avec document.getElementById("historiquejour").innerHTML = response;
na pas deffet sur mon bouton.
peut etre une logique ou un code mal placée ?
si quelqu'un peut me situer
merci.