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！

同样重要的是，还要向“ datepicker”输入中添加“ disabled”属性（如上述代码中所示），以使其可以开始锁定。

希望这会有所帮助！

仅在选中的复选框上使用日期选择器

1 个答案: