仅选中日期选择器复选框

Question

我有一个复选框和一个日期选择器文本字段。在用户选中复选框后，是否只能具有日期选择器功能？我不希望它在任何时候隐藏任何东西，所以这两个字段都应该始终可见。

这是我的要素：

<?php 
$disabled = "";
$checked = "";
//$checked = $res['r548'] == '1' ? "checked="checked"" : "";
if ($res['r548e'] == "1") {
$checked = "checked="checked"";   
$readonly = "readonly"; 
$disabled = "disabled="disabled"";
} else {
$id_date = "id="datepicker"";
$readonly = "readonly"; 
}
echo '<input type="checkbox" name="r548" value="1" '. $checked . ' 
'.$disabled.'  onClick="ds.r548a.value=this.checked ? ''.date('d-m- 
Y').'' : ''; ds.r548c.checked=''" >';
?>
<input type="text" class="listform" style="width:60px;" name="r548a" 
value="<?php echo sqltoalmdatetom($res['r548a']);?> 
<?php echo $id_date;?>

这是我的日期选择器：

$( function() {
$( "#datepicker" ).datepicker({
regional: "da",
constrainInput: true,
showWeek: true
});

因此，只有当复选框被选中时，日期选择器功能才应该是可访问的。这有可能吗？如果有，怎么办？

Answer 1

您可以添加以下javascript代码：

$( "#datepicker" ).datepicker({
regional: "da",
constrainInput: true,
showWeek: true
});
$("#dataLocker").change(function() {
if(this.checked) {
$("#datepicker").prop("disabled",false);
}else{
$("#datepicker").prop("disabled",true);
}
});

<!--calling the libraries-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<input type="checkbox" id="dataLocker">
<input type="text" id="datepicker" disabled>

我将复选框的ID命名为"dataLocker"，如果你想交换它，只需交换HTML代码和javascript即可！

重要的是，还要将"disabled"属性添加到"datepicker"输入中(与上面的代码一样(，这样它就可以开始锁定了。

希望这能有所帮助！