只有當頁面完全加載時，我的 javascript 函數才起作用

Question

我想在用戶單擊具有複選框類型的其他輸入標記後禁用輸入文本，

問題是每次我點擊複選框時日期範圍輸入文字都不會停用，有人可以幫忙嗎？

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>

編輯： 我剛剛意識到，當頁面未完全加載時，它可以按我的預期工作，但是如果頁面完全加載，似乎有些東西使該功能無法工作

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 中寫入即可