jQuery datepicker:按钮禁用，除非两个datepicker输入字段都选择了值_Jquery_Jquery Ui_Jquery Ui Datepicker

jQuery datepicker:按钮禁用，除非两个datepicker输入字段都选择了值

jquery jquery-ui

jQuery datepicker:按钮禁用，除非两个datepicker输入字段都选择了值,jquery,jquery-ui,jquery-ui-datepicker,Jquery,Jquery Ui,Jquery Ui Datepicker,我使用的是jQuery datepicker，我有两个datepicker输入字段，如下所示： <html> <body> <form method=post> <input type=text id='start_date'> //datepicker field <input type=text id='end_date'> // datepicker field <i

我使用的是jQuery datepicker，我有两个datepicker输入字段，如下所示：

<html>
<body>
    <form method=post>
        <input type=text id='start_date'> //datepicker field
        <input type=text id='end_date'>  // datepicker field
        <input type=submit value=Submit>
    </form>
</body>
</html>


//日期选择器字段
//日期选择器字段

我想实现一个功能，表单提交按钮是禁用的，除非两个日期选择器输入字段都从日期选择器日历中选择了日期值

如果两个日期字段都选择了日期值，则按钮将自动启用。如何实现这一点？

将“提交”的标记更改为

，然后在选择了两个日期字段后删除JavaScript中的disabled属性。请注意，禁用JavaScript的用户将获得不同的体验，因此您应该在接收表单的代码中对此进行保护

编辑：为您添加了演示-：）

编辑2：对不起，我误读了问题，第一个演示与日期选择器不兼容。下面是一个使用jQuery日期选择器的更新演示

我没有尝试过看这是否有效，但是如果您有jQuery，可以这样做

新答案：添加了新脚本

<script type="text/javascript">
         $(document).ready(function(){
             $("#sumbit").disabled("disabled", "disabled");

             var startDate = "";
             var endDate = "";
             $("#start_date").datepicker({
                 onSelect: function(dateText, inst) { 
                    startDate = dateText;
                    if(endDate != ""){ ValidateDates(); }
                 }
             });
             $("#start_date").datepicker({
                 onSelect: function(dateText, inst) { 
                    endDate = dateText;
                    if(startDate != ""){ ValidateDates(); }
                 }
             });

             function ValidateDates(){
                 //Validate the dateformats and remove the attribute
             };

         });
</script>
<form method=post>
    <input type=text id='start_date' class="valDate"> //datepicker field
    <input type=text id='end_date' class="valDate">  // datepicker field
    <input type="submit" value="Submit" id="sumbit">
</form>


$（文档）.ready（函数（）{
$（“#sumbit”）。禁用（“禁用”、“禁用”）；
var startDate=“”；
var endDate=“”；
$（“#开始日期”）.datepicker({
onSelect:function（dateText，inst）{
startDate=日期文本；
如果（endDate！=“”）{ValidateDates（）；}
}
});
$（“#开始日期”）.datepicker({
onSelect:function（dateText，inst）{
endDate=dateText；
if（startDate！=“”）{ValidateDates（）；}
}
});
函数ValidateDates（）{
//验证dateformats并删除该属性
};
});
//日期选择器字段
//日期选择器字段

旧答案：

<script type="text/javascript">
         $(document).ready(function(){
             $("#sumbit").disabled("disabled", "disabled");
             $(".valDate").change(function(){
                if($("#start_date).val() != "" && $("#end_date").val() != ""){
                   //validation logic to see if the date is valid
                   $("#sumbit").removeAttr("disabled");
                }
            else{
               $("#sumbit").disabled("disabled", "disabled");
            }
         });
     });
</script>
<form method=post>
    <input type=text id='start_date' class="valDate"> //datepicker field
    <input type=text id='end_date' class="valDate">  // datepicker field
    <input type="submit" value="Submit" id="sumbit">
</form>


$（文档）.ready（函数（）{
$（“#sumbit”）。禁用（“禁用”、“禁用”）；
$（“.valDate”）.change（函数（）{
如果（$（“#开始日期）.val（）！=”&&（$（“#结束日期”）.val（）！=”）{
//验证逻辑以查看日期是否有效
$（“#sumbit”）.removeAttr（“禁用”）；
}
否则{
$（“#sumbit”）。禁用（“禁用”、“禁用”）；
}
});
});
//日期选择器字段
//日期选择器字段

我想你是想用

.change（）

而不是

.change（））

在那里。不，我试过了，更改不适用于jQuery datepicker输入字段。这就是为什么我请Hanks指出这一点，而Yb，Mellon我已经更新了一点答案。我只会在两个输入字段中添加一个readonly属性，以确保它们都具有真实的日期值：确保不破坏可访问性。您应该能够输入日期而不打开JavaScript。此外，一些用户会发现只键入日期更容易（也更快！）。只需指示正确的日期格式，用户就可以按照该示例进行操作。请记住在服务器端保护您的输入：）