Question

我使用了一个复选框来切换带有datepicker的日期输入框。但是当我点击选择器时，它会触发复选框更改事件（意外）。我犯了什么错？这是代码段。

TIA

 <!doctype html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
 <title>jQuery show or hide based on other</title>
 <link rel="stylesheet" href="../jquery-ui-1.10.4.custom/css/smoothness/jquery-ui-1.10.4.custom.css">
 <script src="../jquery-ui-1.10.4.custom/js/jquery-1.10.2.js"></script>
 <script src="../jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.js"></script>
 <link rel="stylesheet" href="/resources/demos/style.css">
 <script>
 $(function() {
  $("#pickDate").change(function() 
  {   
    alert("call pick date change event");
if (!$(this).is(':checked')) {
       $("#dateDiv").hide();
    }
else {
      $("#dateDiv").show();
   } 
 });

 $( "#datepicker" ).datepicker();

 $( "#endDate" ).datepicker({ defaultDate: +7, dateFormat: 'mm/dd/yy',  maxDate: "+1m+3w", minDate: -10});

 });
 </script>
 </head>
 <body>

 <div id="selection1">
 <label for="toggle date">Show selection criteria<label>
 <input type="checkbox" id="pickDate" name="pick_Date">
 <br><br>
 <div id="dateDiv" style="display:none">
 <label for="start_date">Start Date:</label>
 <input type="textbox" name="start_date" id="datepicker" size="30">
 </div>
 </div>

 <p>Date: <input type="text" id="endDate" size="30" /> </P>`enter code here`

 </body>
 </html>

Answer 1

看起来FireFox有问题。

您尚未正确关闭标签（<label for="toggle date">Show selection criteria<label> 2个开放标签，没有结束标签）

<label for="pickDate">Show selection criteria
    <input type="checkbox" id="pickDate" name="pick_Date"/>
</label>

演示：Fiddle

jquery datepicker触发意外

1 个答案: