Question

我正在使用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>

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

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

Answer 1

将“提交”的标记更改为<input type="submit" value="Submit" disabled="disabled"/>，然后在选择了两个日期字段时删除JavaScript中的已禁用属性。请注意，禁用JavaScript的用户将获得不同的体验，因此您应该在接收表单的代码中防止这种情况。

修改：为您添加了一个演示 - http://jsfiddle.net/acxDU/：）

编辑2 ：抱歉，我误解了这个问题，第一个演示无法使用datepicker。这是一个与jQuery datepicker http://jsfiddle.net/acxDU/2/

一起使用的更新演示

Answer 2

没有试图看看这是否有效，但如果你有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>

OLD回答：

<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>

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

2 个答案: