Ma fonction javascript ne fonctionne que lorsque la page est entièrement chargée

Question

Je souhaite désactiver le texte de saisie après que l'utilisateur a cliqué sur une autre balise de saisie avec le type de case à cocher,

Le problème est que le texte de saisie de la plage de dates n'est pas désactivé à chaque fois que je clique sur la case à cocher, quelqu'un peut-il m'aider ?

function myFunction() {
  document.getElementById("daterange").disabled = true;
}

<div class="item form-group">
  <label class="control-label col-md-3 col-sm-3 col-xs-12" for="email">Date <span class="required">*</span>
        </label>
  <div class="col-md-6 col-sm-6 col-xs-12">
    <input type="text" name="daterange" id="daterange" class="form-control date" placeholder="Choose multiple dates">
    <p style="color: white">
      <input type="checkbox" name="everyday" id="everyday" onclick="myFunction()" value="everyday" class="flat" /> Everyday
    </p>
  </div>
</div>

Éditeur : Je viens de réaliser que lorsque la page n'est pas complètement chargée, elle fonctionne comme prévu, mais si la page est complètement chargée, il semble y avoir quelque chose qui empêche la fonctionnalité de fonctionner

Answer 1

Vous pouvez peut-être essayer d'utiliser alpineJS dans Laravel

<div class="item form-group">
  <label class="control-label col-md-3 col-sm-3 col-xs-12" for="email">Date <span class="required">*</span>
        </label>
  <div x-data="{ inputDisabled: false }"  class="col-md-6 col-sm-6 col-xs-12">
    <input x-bind:disabled="inputDisabled"  type="text" name="daterange" id="daterange" class="form-control date" placeholder="Choose multiple dates">
    <p style="color: white">
      <input x-on:click="inputDisabled = true" type="checkbox" name="everyday" id="everyday"  value="everyday" class="flat" /> Everyday
    </p>
  </div>
</div>

Si vous utilisez Laravel Brezze, Alpine JS est déjà inclus. Nous pouvons facilement manipuler notre DOM sans écrire beaucoup de code JS. Écrivez simplement en HTML en ligne