JQuery работает в консоли, но не в реальном коде для включения флажка отключить

Question

Я создал один флажок на клике, на котором поля даты включены / отключены

это мой код для jquery:

$(document).ready(function() {
    $("#mychechbox").click(function(){
        $("#date_1").attr("disabled", !this.checked);
    });
});

мои HTML-теги для того же:

<input id="date_1" value="<?php echo $this->input->post('from');  ?>" name="from" class="form-control" type="date" placeholder=" From" disabled/>
<p class="pull-left" style="font-size:10px;">
    From Date<br><br>Enable Date fiedls
    <input type="checkbox" class="pull-left" id="mychechbox" name="mychechbox">
</p>
</div>
<div class="col-sm-2" >
    <input id="date_2" value="<?php  $to= $this->input->post('to');if($to){echo $to;}else{echo date('m/d/y'); }  ?>" name="to" class="form-control" type="date" placeholder=" To" disabled/>
    <p class="pull-left" style="font-size:10px;">End Date </p>
</div>

Я делаю это в Codeigniter.

Пожалуйста, предложите мне некоторые улучшения, если это необходимо

Answer 1

Зачем использовать jQuery и начинать смешивать HTML5 с устаревшей (еще не устаревшей) средой, такой как jQuery?

Пример только HTML5 + Pure JS: Включить / отключить поля ввода

и если вы хотите использовать jQuery Не используйте причину щелчка, иначе она не будет работать при установке / снятии флажка при использовании клавиатуры.

Использование изменения событие вместо этого и проверьте текущее состояние флажка, чтобы он был установлен или нет.

Пример:

$(document).ready(function() {
  $("#mychechbox").change(function() {
    $("#date_1").prop("disabled", !this.checked);
  });
});

Также используйте prop вместо attr для добавления свойства disabled в поле ввода. Также рекомендуем использовать # mycheckbox с k вместо # mychechbox с h только для того, чтобы другие люди неошибка, если они пишут правильный английский.

Answer 2

Итак, наконец, после стольких попыток я получил решение: я не знал, что вместе с моим флажком класс icheck-helper (о котором я упоминал в одном из комментариев) также загружается автоматически ... поэтому я сделал это:

$('#mycheckbox').on('ifChanged', function(event) {
         if(this.checked) {
                         // alert("yes");
                         $("#date_1").removeAttr("disabled");
                         $("#date_2").removeAttr("disabled");
         }

         else {
                         // alert("no");
                         $("#date_1").attr("disabled","disabled");
                         $("#date_2").attr("disabled","disabled");
         }
    });

спасибо всем за ответы

Answer 3

Если вам нужно включить или отключить средство выбора даты на основе флажка или нет, попробуйте следующий код:

     $(document).ready(function() {
        $("#mychechbox").click(function(){ 
              $("#mychechbox").is(':checked') ? $('#mydate').datepicker('enable') : $('#mydate').datepicker('disable');
        });
     });