2014-02-17 77 views
0

我用一個複選框來切換日期輸入框與datepicker。但是當我點擊選擇器時,它觸發了複選框更改事件(意外)。我做錯了什麼?這是代碼片段。jquery 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> 
+1

看起來不錯http://jsfiddle.net/arunpjohny/g78SP/1/ –

+1

這裏似乎很好http://jsfiddle.net/j08691/gJab8/ – j08691

+0

這是使用的瀏覽器 –

回答

0

看起來像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

+0

是的,添加缺少的結束標籤,它的工作原理。我不清楚爲什麼該事件只是由於缺少結束標籤而被調用。 – user3317632