如何在日期之前禁用/启用输入元素

How to disable/enable input elements until/before date?

本文关键字：启用 输入 元素 日期      更新时间：2023-09-26

我有一个简单的表单，有一些输入元素，像这样:

<form action="..." method="post" id="myform">
<p>Early bird price</p>
<p>
<label for="earlymember">Members: 100 USD</label>
    <input type="radio" id="earlymember" value="Early bird members, 100 USD">
<label for="earlynotmember">Not members: 120 USD</label>
    <input type="radio" id="earlynotmember" value="Early bird not members, 120 USD">
</p>
<p>Normal price</p>
<p>
<label for="normalmember">Members: 200 USD</label>
    <input type="radio" id="normalmember" value="Normal members, 100 USD">
<label for="normalnotmember">Not members: 120 USD</label>
    <input type="radio" id="normalnotmember" value="Normal not members, 120 USD">
</p>

我如何禁用#normalmember和#normalnotmember无线电直到日期，例如2015-09-30在jQuery或简单的JavaScript?

(当然，在此日期之后，我需要将这些无线电设置为启用和禁用。)

我强烈建议您比较服务器端在表单提交之前和之后的日期，因为最终用户可以很容易地覆盖您的客户端代码。但是，由于您没有提到您的服务器端环境，因此我仍然提供客户端解决方案。

$(document).ready(function() {
  var myDate = new Date("2015-09-30");
  $('#normalmember,#normalnotmember').prop('disabled', $.now() < myDate.getTime());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="..." method="post" id="myform">
  <p>Early bird price</p>
  <p>
    <label for="earlymember">Members: 100 USD</label>
    <input type="radio" id="earlymember" value="Early bird members, 100 USD">
    <label for="earlynotmember">Not members: 120 USD</label>
    <input type="radio" id="earlynotmember" value="Early bird not members, 120 USD">
  </p>
  <p>Normal price</p>
  <p>
    <label for="normalmember">Members: 200 USD</label>
    <input type="radio" id="normalmember" value="Normal members, 100 USD">
    <label for="normalnotmember">Not members: 120 USD</label>
    <input type="radio" id="normalnotmember" value="Normal not members, 120 USD">
  </p>

您可以获取当前日期，并将其与您定义的日期进行比较:

var date = new Date().getTime();
var compareDate = new Date("2015-09-30");
if (date < compareDate.getTime()) {
  $('#normalmember, #normalnotmember').attr('disabled', true);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="..." method="post" id="myform">
  <p>Early bird price</p>
  <p>
    <label for="earlymember">Members: 100 USD</label>
    <input type="radio" id="earlymember" value="Early bird members, 100 USD">
    <label for="earlynotmember">Not members: 120 USD</label>
    <input type="radio" id="earlynotmember" value="Early bird not members, 120 USD">
  </p>
  <p>Normal price</p>
  <p>
    <label for="normalmember">Members: 200 USD</label>
    <input type="radio" id="normalmember" value="Normal members, 100 USD">
    <label for="normalnotmember">Not members: 120 USD</label>
    <input type="radio" id="normalnotmember" value="Normal not members, 120 USD">
  </p>

相关文章：