根据时间切换输入选择[重复]答案

【问题标题】：Switch input selection according to the time [duplicate]根据时间切换输入选择[重复]
【发布时间】：2021-01-27 00:10:51
【问题描述】：

我目前正在写一个小程序，早上把工人保存为“IN”，保存“OUT”，我想让程序在早上把收音机切换到“IN”并禁用“OUT”。下午同样的事情，把收音机切换到“OUT”并禁用“IN”

function EnableDisable() {

  var today = new Date();
  var curHr = today.getHours();

  if (curHr > 12) {
    option1.disabled = true;
    option1.disabled = false;
    alert("come here");

  } else {
    option1.disabled = false;
    option2.disabled = true;;
  }
};

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-success active">
    <input type="radio" class="form-control input-lg" name="status" value="in" id="option1" autocomplete="off" checked disabled="disabled"> In
    </label>
  <label class="btn btn-danger">
    <input type="radio" name="status" value="out" id="option2" autocomplete="off" disabled="disabled"> Out
    </label>
</div>

【问题讨论】：

你有 option1.disabled = true; option1.disabled = false;
如果单选按钮中只有两个选项。它们都完全取决于一天中的时间。为什么还要制作这个单选按钮？它不像用户可以切换它？！而且你真的应该更好地查看禁用并检查适当性。
拜托，我只需要早上自动选择in收音机，然后下午自动选择out收音机，拜托
这能回答你的问题吗？ Check a radio button with javascript 也研究readonly 属性，我认为你不需要disabled。

标签： javascript html css

【解决方案1】：

我建议您拆分功能。您不应该尝试在同一方法中处理多重播放状态。您的项目需要以下方法：

Init(h) 启动项目时调用一次的函数
CheckIn(input) 处理保存签入时间的函数
CheckOut(input) 处理保存 checkOut 时间的函数

剩下的功能，比如在 12 点之前没有被检查时禁用 IN 按钮应该是它自己的方法，并且可以间隔处理。

最终，你会得到这样的结果：

const init = (h) => {
    const btnGroup = document.querySelector('.btn-group');
  const btnSucess = btnGroup.querySelector('.btn-success input');
  const btnDanger = btnGroup.querySelector('.btn-danger input');
  
  const isMorning = h > 6 && h < 12;
  const isAfternoon = h > 12 && h < 20;
  
  if(isMorning) {
    btnSucess.disabled = false;
    btnDanger.disabled = true;
  } else if(isAfternoon) {
    btnSucess.disabled = true;
    btnDanger.disabled = false;
  } else {
    btnSucess.disabled = true;
    btnDanger.disabled = true;
  }
}

const checkIn = (input) => {
  input.disabled = true;
  const today = new Date();
  console.log(today.toString());
}
const checkOut = (input) => {
  input.disabled = true;
  const today = new Date();
  console.log(today.toString());
}

const setup = () => {
    const hours = new Date().getHours();
    init(hours);

}

// Load
window.addEventListener('load', setup);

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-success active">
    <input type="radio" class="form-control input-lg" name="status" value="in" id="option1" autocomplete="off" onInput="checkIn(this)"> In
  </label>
  <label class="btn btn-danger">
    <input type="radio" name="status" value="out" id="option2" autocomplete="off" onInput="checkOut(this)" disabled> Out
  </label>
</div>

这当然不是完美的代码。您应该在checkOut() 函数中检查是否节省了签入时间。我建议使用新的Date().getTime() 来节省时间。

这应该足以让您领先一步。我想指出您的系统目前不是那么灵活。例如，如果有一些东西必须在 12 点之后签入，那么您可能会遇到问题。如果用户不遵循您构建的模型轨迹，您应该处理您的业务案例。

祝你好运

【讨论】：