Datepicker только при установленном флажке

Question

У меня есть флажок и текстовое поле DatePicker.Возможно иметь только функцию выбора даты, после того, как пользователь установил флажок?Я не хочу, чтобы он что-либо скрывал в любой точке, поэтому оба поля должны быть видны постоянно.

Это мои элементы:

<?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» (как в приведенном выше коде), чтобы он уже мог быть заблокирован.

Надеюсь, это поможет!