如果选中复选框，如何启用 DateTime？

Question

我正在尝试实现这一点，当用户选中复选框时，它会启用特定字段，例如 JavaScript 中的 DateTime。

例如，默认情况下 dateTime 是禁用的，直到用户选中 Checkbox，然后 DateTime 才会启用。

这类似于我一直在搜索的内容，用于在用户选中复选框时显示文本：

function myFunction() {
  // Get the checkbox
  var checkBox = document.getElementById("myCheck");
  // Get the output text
  var text = document.getElementById("text");

  // If the checkbox is checked, display the output text
  if (checkBox.checked == true){
    text.style.display = "block";
  } else {
    text.style.display = "none";
  }
}

复选框：

<input type="checkbox" id="myCheck" onclick="myFunction()">
    
<p id="text" style="display:none">Checkbox is CHECKED!</p>

Answer 1

您可以通过执行以下操作来实现此目的。我在代码中添加了文档以解释此解决方案的工作原理：

var yourCheckbox = document.querySelector('#myCheck');
var yourDateField = document.querySelector('#yourDateField');

// This function will update the date field's enabled/disabled
// attribute, depending on if the yourCheckbox is checked
function updateYourDateField() {
    
    if(yourCheckbox.checked) {
       yourDateField.disabled = true;
    }
    else {
       yourDateField.disabled = false;
    }
}
   
// Add an event listener to the change event, that causes
// the date field to be enabled/disabled when ever the checkbox
// is clicked and the value changes
yourCheckbox.addEventListener('change', function() {
       
   updateYourDateField();
})
 
// Call this to ensure your date field is in correct state
// when the script is first run
updateYourDateField();

<form>
  <div>
    <label>Disable/Enable control</label>
    <input id="myCheck" type="checkbox" />
  </div>
  <div>
    <label>The date field</label>
    <input id="yourDateField" type="date" />
  </div>
</form>

这是working jsFiddle also