javascript - 选中复选框时如何使文本字段可编辑？

Question

实际上，我有很多复选框和文本字段是通过单一代码从数据库中获取的。当我选中一个特定的复选框时，我需要它，然后该复选框前面的文本字段变得可编辑。我该怎么做？

这是我的 PHP 代码

<div class="my"><?php
    while ($ass = mysql_fetch_array($rs)) {?>
        <input type="checkbox" name="fees_name[]" id="fee_name" value="<?php echo $ass['fees_name']; ?>" onclick='toggleReadonly(this)'>&nbsp;&nbsp;
        <?php echo $ass['fees_name']; ?> 
        <div style="padding:0px 10px 0px 0px; float: right;"> 
            <input id="fee_amt" class="fee_amt" type="text" placeholder="amt" name="fees_amt[]" >
        </div> <br><br><?php 
    }?>
</div> 

和我的 Javascript

$(document).ready(function(){
    $('#fee_name').click(function() {
        $('#fee_amt').prop('disabled', !$(this).is(':checked'));
    });
});

但它只适用于第一个复选框。谁能告诉我我能为别人做些什么？？？

Answer 1

所有启用/禁用的文本字段都具有相同的 ID。尝试在循环内设置不同的 id，并在您的 javascript 中根据选中的复选框启用该 id。 另一种方法(不使用 id)是在每个复选框中设置 data 属性:

<div class="my">
  <?php $i = 1; ?>
  <?php while ($ass = mysql_fetch_array($rs)) { ?>
    <input type="checkbox" name="fees_name[]" class="fee_name" data-mycheckbox="<?php echo $i; ?>" value="<?php echo $ass['fees_name']; ?>" onclick='toggleReadonly(this)'>
    <?php echo $ass['fees_name']; ?> 
    <div style="padding:0px 10px 0px 0px; float: right;"> 
        <input id="fee_amt<?php echo $i; ?>" class="fee_amt" type="text" placeholder="amt" name="fees_amt[]" >
    </div> <br><br><?php 
    $i++;
  }?>
</div> 

在你的 js 脚本中:

$(document).ready(function(){
  $(".fee_name").click(function(event) {
    var identifier = $(this).data('mycheckbox');
    var input_identifier = "#fee_amt" + identifier; 
    $(input_identifier).prop('disabled', !$(this).is(':checked'))
  });
});