点击checkbox无法禁用daterange输入框，页面加载完成后失效求助

页面加载完成后功能失效，核心原因大概率是日期选择器插件（比如daterangepicker）重新渲染了daterange输入框——这类插件会替换原input元素，导致你通过getElementById获取的元素引用失效；或者插件初始化时会自动移除disabled属性。另外，内联onclick事件也可能被其他脚本覆盖。

以下是针对性修复方案：

方案1：修复函数逻辑，兼容插件渲染 #

修改myFunction，确保每次操作当前DOM中的元素，同时处理插件的禁用逻辑（如果使用了日期选择器插件）：

function myFunction() {
  const daterange = document.getElementById("daterange");
  const checkbox = document.getElementById("everyday");
  // 切换禁用状态：勾选时禁用，取消勾选时启用
  daterange.disabled = checkbox.checked;
  
  // 兼容daterangepicker类插件
  if (daterange.daterangepicker) {
    checkbox.checked ? daterange.daterangepicker.disable() : daterange.daterangepicker.enable();
  }
}

方案2：改用事件监听，避免内联事件被覆盖 #

移除内联onclick，通过JS绑定事件，稳定性更强：

<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" value="everyday" class="flat" /> Everyday
    </p>
  </div>
</div>

// 等待DOM完全加载后绑定事件
document.addEventListener('DOMContentLoaded', function() {
  const checkbox = document.getElementById("everyday");
  const daterange = document.getElementById("daterange");
  
  checkbox.addEventListener('change', function() {
    daterange.disabled = this.checked;
    
    // 兼容daterangepicker插件
    if (daterange.daterangepicker) {
      this.checked ? daterange.daterangepicker.disable() : daterange.daterangepicker.enable();
    }
  });
});

额外排查点 #

• 打开浏览器控制台查看是否有报错（比如找不到元素），能快速定位问题；
• 检查是否有其他脚本在页面加载后修改daterange的disabled属性（比如表单重置、插件初始化代码）。

内容的提问来源于stack exchange，提问作者M. Rivaldi Anwar Putra