选中复选框时无法启用输入类型 (Jquery） - Can't enable input type when checkbox checked (Jquery)

Can't enable input type when checkbox checked (Jquery)

选中复选框时，我希望启用输入类型。我已经选中了复选框，但输入类型仍然禁用。请帮忙..

这是我的 jquery

$('#haha').change(
  function(id) {
    if (this.checked) {
      $("#nama_" + id).prop('disabled', false);
      $("#ket_" + id).prop('disabled', false);
    } else {
      $("#nama_" + id).prop('disabled', true);
      $("#ket_" + id).prop('disabled', true);
    }
    $(document).ready(function() {
      $("input").focus(function() {
        $(this).css("background-color", "yellow");
      });
      $("input").blur(function() {
        $(this).css("background-color", "#lightblue");
      });
    });
  });

这是我的复选框和输入类型

<td> <input type ="checkbox" id="haha" class=checkbox1 name="checklist" value=<?php echo $agenda->id; ?>> <?php echo $agenda->id; ?> </td>
<td> <input type="text" name="dnama" id="nama_<?php echo $agenda->id; ?>" class="yes" value="<?php echo $agenda->nama; ?>" disabled /> </td>
<td> <input type="text" name="dketer" id="ket_<?php echo $agenda->id; ?>" value="<?php echo $agenda->keterangan; ?>" disabled> </td>

function enable(id) {
if(document.getElementById('haha').checked) {
document.getElementById("nama_"+id).disabled= false;
document.getElementById("ket_"+id).disabled= false;
}else {
    document.getElementById("nama_"+id).disabled= true;
    document.getElementById("ket_"+id).disabled= true;
}

}

首先使用单击事件而不是更改事件复选框。

还有为什么你在函数中保留了 document.ready 语句。我的建议是把这个语句拿出来，并在里面做所有的事件绑定。

问题是你使用的变量 id 没有你想到的值。它包含事件对象。因此，要获取文本元素，您可以使用 [类型=文本] 选择器。** 仅当您具有这些输入和复选框时才使用 [type=text] 选择器。如果您还有其他元素，请使用适当的选择器。代码如下。

 $(document).ready(function() {
   $("input[type=text]").focus(function() {
        $(this).css("background-color", "yellow");
   }).blur(function() {
        $(this).css("background-color", "#lightblue");
   });
   $('#haha').click(function() {
         if ($(this).is(":checked")) {
           $("input[type=text]").prop('disabled', false);
         } else {
           $("input[type=text]").prop('disabled', true);
         }
    });
 });

好的，对于特定的 id 选择器，我可以从您的 html 中看到 id 包含复选框的值。所以你也可以使用它。

 $(document).ready(function() {
   $("input[type=text]").focus(function() {
        $(this).css("background-color", "yellow");
   }).blur(function() {
        $(this).css("background-color", "#lightblue");
   });
   $('#haha').click(function() {
         var id_suffix = $(this).val();
         if ($(this).is(":checked")) {
           $("input#name_"+id_suffix).prop('disabled', false);
           $("input#ket_"+id_suffix).prop('disabled', false);
         } else {
           $("input#name_"+id_suffix).prop('disabled', false);
           $("input#ket_"+id_suffix).prop('disabled', false);
         }
    });
 });

这应该有效，您必须在 prop 上使用删除属性来删除禁用属性

$('#haha').change( function(event) { 
   var id = event.target.id;
   if (this.checked) { 
       $("#nama_" + id).removeAttr('disabled');         $("#ket_" + id).removeAttr('disabled'); 
} else {
  $("#nama_" + id).attr('disabled', true); 
  $("#ket_" + id).attr('disabled', true); 
} 
$(document).ready(function() { $("input").focus(function() { $(this).css("background-color", "yellow"); }); $("input").blur(function() { $(this).css("background-color", "#lightblue"); }); }); });