HTML表单浏览器侧复选框和jQuery日期选择器条目复选框

HTML form browser side checkbox and jQuery datepicker entry check

本文关键字：复选框 日期 选择器 jQuery 表单 浏览器 HTML      更新时间：2023-09-26

我有一个javascript表单检查问题，无法解决。。。

我有一个表单，在允许用户单击提交按钮之前，需要进行浏览器侧检查。

这个例子的形式已经简化了。有一个jQuery日期选择器条目和一个复选框。

我需要浏览器检查是否至少在日期选择器输入框中有条目，或者在允许按下提交按钮之前勾选复选框。如果复选框AND the datepicker框中有一个条目，那也没关系，因为insert_sql_row.php处理脚本会处理这个条目。

注意：这不是在日期选择器部分中放入"必需"的情况，因为如果勾选了复选框，则不需要输入日期，但"必需"属性将阻止提交表单。

下面的代码示例；

<!-- jQuery datepicker script -->
<script>
$(function () 
    {
       var date = new Date();
       var currentMonth = date.getMonth();
       var currentDate = date.getDate();
       currentDate = currentDate;
       var currentYear = date.getFullYear();
       $('#datepicker1').datepicker(
       {
        dateFormat: "yy-mm-dd",
        minDate: new Date(currentYear, currentMonth, currentDate),
        beforeShowDay: $.datepicker.noWeekends
       }); 
  });
</script>

<!-- test code for date / no date needed options -->
<form method="POST" action="insert_sql_row.php">
<b>Pick date:</b>
<input type="text" id="datepicker1" name="date_entry" maxlength="10" size="10" />
<b>OR No Date Needed: </b>
<input type="checkbox" name="checkbox1" value="1">
<input type="submit" name="Submit1" value="Submit form"></td></tr>');
</form>

非常感谢，马特。

您的Html应该是

<input type="checkbox" name="checkbox1" value="1" onchange="checkChange(this);">
<input type="text" id="datepicker1" name="date_entry" maxlength="10" size="10" required />

和脚本

funciton checkChange(thisObj)
{
   if($(thisObj).is(":checked"))
   {
       $("#datepicker1").removeAttr("required");
   }else {
       $("#datepicker1").attr("required");
    }
    //rebind datepicker after changing required attribute
    $("#datepicker1").removeClass('hasDatepicker').datepicker();
}
相关文章：