在周末和下班时间禁用按钮答案

【问题标题】：Disable button during weekend and off businees hour在周末和下班时间禁用按钮
【发布时间】：2018-07-27 20:18:34
【问题描述】：

示例 1：此代码将在周末禁用按钮

<html>
<head>
<title>Page Title</title>
</head>
<body>
<style>
.disabled {
  background: grey;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="myButton">Press me only on weekday</button>

<script>
$(function() {
  var now = new Date(),
      days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
      day = days[now.getDay()],

      $button = $('#myButton');

  if (day === days[0] || day === days[6]) {
      $button.addClass('disabled');
  }

  $button.click(function() {
      if ($(this).hasClass('disabled')) {
          alert('We are not accepting entries during weekends.')
          return;
      }
  });
})
</script>

</body>
</html>

示例 2：此代码将在下班时间禁用，并且仅在工作日下午 5:00(17:00) - 12:00 (24:00) 期间可用。时钟位置基于 +8 UTC

<input class="submit" type="submit" id="checktime" value="Check"/>

<script type="text/javascript" defer="defer">
<!-- 
var enableDisable = function(){
    var UTC_hours = new Date().getUTCHours() +8;
    if (UTC_hours > 17 && UTC_hours < 24){
        document.getElementById('checktime').disabled = false;
    }
    else
    {
        document.getElementById('checktime').disabled = true;
    }
};
setInterval(enableDisable, 1000*60);
enableDisable();
// -->
</script>

我的问题是，我需要结合这两个代码，这样我才能实现这样的目标..

用户只允许在下午 5:00(17:00) - 12:00 AM 期间点击按钮 (24:00) 在工作日和周末该按钮将被禁用。如果用户在关闭期间单击该按钮，则需要显示警报消息天/小时

如何将这两个脚本正确组合成这样？谢谢

【问题讨论】：

标签： javascript jquery html datetime time

【解决方案1】：

这将在上午 12:00 到下午 5:00（任何一天）之间或当日是周六或周日时添加 disabled 属性。然后在按钮被单击和禁用时显示警报。

<script>
    $(function() {
        var now = new Date(),
        days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
  day = days[now.getDay()],
        UTC_hours = new Date().getUTCHours() +8;
        $button = $('#myButton');

        if (day === days[0] || day === days[6] || (UTC_hours >= 0 && UTC_hours < 17)) {
            $button.prop( "disabled", true );
        } else {
            $button.prop( "disabled", false );
        }

        $button.click(function() {
            if ($(this).is(':disabled')) {
                alert('We are not accepting entries during weekends.')
                return;
            }
        });
   })
</script>

【讨论】：

附带说明，这可能不是保证他们在这段时间内无法提交条目的最佳方式。使用浏览器开发工具，您可以相当轻松地删除 disabled 属性。如果您没有在后端进行类似的检查以防止提交，那么您最好使用 JS 添加这些或完全删除按钮并将其替换为消息。
我喜欢你的解决方案，但也同意你的旁注。这是我会在服务器端做的事情。
很有趣，但是如果用户在下班时间而不是 5-12 点点击按钮，如何让它在工作日显示消息？
抱歉，看错了要求。现在，如果时间在上午 12:00 到下午 5:00 之间，它应该禁用该按钮，并允许从下午 5:00 到上午 12:00 进行点击。
当我点击按钮时..它在按钮被禁用时显示警报消息..当我点击按钮时..按钮仍然作为提交按钮做出反应并继续提交......你知道吗如何正确禁用它？