Question

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

这是我的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>

Answer 1

First of all use click event instead of change event for checkbox.

Also why have you kept document.ready statement inside of function. What I suggest is bring that statement out, and do all event binding inside that.

The problem is that the variable id you are using does not have the value you thinking. It has the event object contained in it. So to get the text elements you can use [type=text] selector. ** Use [type=text] selector only if you have these inputs and checkbox only. In case you have other elements as well, use the appropriate selector. The code follows as below.

 $(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);
         }
    });
 });

Alright for the specific id selectors, I can see from your html that the id comprises of the value of checkbox. So you can use that as well.

 $(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);
         }
    });
 });

Answer 2

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;
}

}

Answer 3

这应该可行，您必须使用删除属性而不是支持删除DISABLED属性

$('#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"); }); }); });

选中复选框后无法启用输入类型（Jquery）

3 个答案: