javascript - 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 + 纯 JS 示例: Enable/Disable input fields

如果你确实想使用 jQuery 不要使用点击，因为当您使用键盘选中/取消选中复选框时，它不会起作用。

改用change事件并验证复选框的当前状态，以确定是否已选中。

示例:

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

还可以使用 prop 而不是 attr 在输入字段上添加禁用属性。还建议使用带有 k 的 #mycheckbox，而不是带有 h 的 #mychechbox，以确保其他如果英语写得正确，人们就不会犯错。