基于变量值禁用选择选项
[英]disable select option based on a variable value
问题描述
I have two select option in my code. 
我的代码中有两个选择选项。 First one selects the date and second one selects time. 第一个选择日期，第二个选择时间。 I want that If user selects today's date from select option 1, some time options from select option 2 should be disabled. 我希望如果用户从选择选项1中选择今天的日期，则应该禁用选择选项2中的某些时间选项。
For ex. 对于前。 If user selects today's date(15), 6.00.00 time should be disabled. 如果用户选择今天的日期（15），则应禁用6.00.00时间。 Again tomorrow if user will select 16, 6.00.00 time should be disabled. 如果用户将选择16，则明天再次禁用6.00.00时间。 this should go on. 这应该继续。
This is my code- 这是我的代码-
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
</head>
<body>
<select name="time" id = "put_time">
<option value="Select Time">Select Time</option>
<option value="6.00.00" id = "t1">6.00.00</option>
<option value="6.30.00" id = "t2">6.30.00</option>
<option value="7.00.00" id = "t3">7.00.00</option>
<option value="7.30.00" id = "t4">7.30.00</option>
</select>
<select name="date" id = "put_date">
<option value="Select date" >Select Date</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
</select>
<script>
var today = new Date();
if(document.getElementById('put_date') == today.getDate())
{
document.getElementById("t1").disabled = true;
}
else{
document.getElementById("t1").disabled = false;
};
</script>
</body>
</html>
But I am not getting desired result. 但是我没有得到期望的结果。 Someone please guide me how to achieve this? 有人请指导我如何实现这一目标？
Thanks. 谢谢。
2 个解决方案
解决方案1
0 已采纳 2018-02-15 12:02:34
document.getElementById('put_date') == today.getDate() is not a valid statement, you should compare the value of the element ( document.getElementById('put_date').value ). document.getElementById('put_date') == today.getDate()不是有效的语句，您应该比较元素的value （ document.getElementById('put_date').value ）。 I also invoke the function on change, because on init the value of the second select is empty (not really empty, it's equal to "Select date" ): 我还会在更改时调用该函数，因为在初始化时第二个select的值是空的（不是真正的空，它等于"Select date" ）：
function onChange() { var today = new Date(); if (document.getElementById('put_date').value == today.getDate()) { document.getElementById("t1").disabled = true; } else { document.getElementById("t1").disabled = false; } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="time" id = "put_time"> <option value="Select Time">Select Time</option> <option value="6.00.00" id = "t1">6.00.00</option> <option value="6.30.00" id = "t2">6.30.00</option> <option value="7.00.00" id = "t3">7.00.00</option> <option value="7.30.00" id = "t4">7.30.00</option> </select> <select name="date" id = "put_date" onchange="onChange()"> <option value="Select date">Select Date</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> </select>
解决方案2
0 2018-02-15 12:14:47
You can do this like below. 您可以按照以下步骤进行操作。
$(document).ready(function(){
$('#put_date').change(function(){
var d = new Date();
var n = d.getDate();
if($(this).val() == n){
$('#t1').prop('disabled',true);
}
})
})
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.