仅当页面完全加载时，我的 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 中写入即可