javascript - 如果选中复选框，如何启用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";
  }
}
Checkbox: <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