Fungsi javascript saya hanya berfungsi apabila halaman dimuatkan sepenuhnya

Question

Saya mahu melumpuhkan teks input selepas pengguna mengklik pada teg input lain dengan jenis kotak semak,

Masalahnya ialah teks input julat tarikh tidak dilumpuhkan setiap kali saya mengklik pada kotak pilihan, adakah sesiapa boleh membantu?

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>

Editor: Saya baru menyedari bahawa apabila halaman tidak dimuatkan sepenuhnya ia berfungsi seperti yang saya jangkakan, tetapi jika halaman dimuatkan sepenuhnya nampaknya ada sesuatu yang menghalang ciri tersebut daripada berfungsi

Answer 1

Mungkin anda boleh cuba menggunakan alpineJS dalam 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>

Jika anda menggunakan laravel brezze, alpine JS sudah disertakan. Kami boleh memanipulasi DOM kami dengan mudah tanpa menulis banyak kod JS. Tulis sahaja dalam HTML sebaris