Meine Javascript-Funktion funktioniert nur, wenn die Seite vollständig geladen ist

Question

Ich möchte Eingabetext deaktivieren, nachdem der Benutzer auf ein anderes Eingabe-Tag mit Kontrollkästchentyp geklickt hat,

Das Problem besteht darin, dass der Eingabetext für den Datumsbereich nicht jedes Mal deaktiviert wird, wenn ich auf das Kontrollkästchen klicke. Kann mir jemand helfen?

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>

Herausgeber: Mir ist gerade aufgefallen, dass die Seite wie erwartet funktioniert, wenn sie nicht vollständig geladen ist. Wenn die Seite jedoch vollständig geladen ist, scheint es etwas zu geben, das die Funktion der Funktion verhindert

Answer 1

也许你可以尝试在laravel中使用alpineJS

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

如果你使用 laravel brezze，alpine JS 已经包含在其中。 我们可以轻松地操作我们的 DOM，而无需编写大量 JS 代码。只需在内联 HTML 中写入即可