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'];?>"> <?php echo $ass['fees_name']; ?> 

<input id="fee_amt" class="fee_amt" type="text" placeholder="amt" name="fees_amt[]" >
                  <br><br>
         <?php } ?> // my while loop end here
          </div>

和我的Javascript

<script>
  $(document).ready(function(){

  $('#fee_name').click(function() {

  $('#fee_amt').prop('disabled', !$(this).is(':checked'));

     });
  });
</script>

但它仅适用于第一个复选框。任何人都可以告诉我我能为他人做些什么，以及如何为每个文本域创建不同的ID？我的文本域只由一个代码创建。。

Answer 1

以下是您需要的工作代码，

$( "input[type=checkbox]" ).on( "click", function(){
    if($(this).is(':checked')) {
        $(this).next().prop('disabled', false);
    } else {
        $(this).next().prop('disabled', true);
    }

});

<强> HTML

<input type="checkbox" name="fees_name[]">
<input type="text" disabled="disabled" /><br/>
<input type="checkbox" name="fees_name[]">
<input type="text" disabled="disabled" /><br/>
<input type="checkbox" name="fees_name[]" >
<input type="text" disabled="disabled" /><br />
<input type="checkbox" name="fees_name[]">
<input type="text" disabled="disabled" /><br />
<input type="checkbox" name="fees_name[]">
<input type="text" disabled="disabled" />

JSFIDDLE

如果您需要提供姓名，则可以使用input[name='fees_name[]']作为

$( "input[name='fees_name[]']" ).on( "click", function(){
    if($(this).is(':checked')) {
        $(this).next().prop('disabled', false);
    } else {
        $(this).next().prop('disabled', true);
    }

});

JSFIDDLE

Answer 2

多次渲染以下行：

<input type="checkbox" name="fees_name[]" id="fee_name" value="<?php echo $ass['fees_name'];?>"> <?php echo $ass['fees_name']; ?>

这意味着ID fee_name不会是唯一的，这是不良做法（以及它仅适用于第一项的原因）。

尝试这样的事情：

而不是id="fee_name" put class="fee_name"（重复类名称没有问题，与ID不同）。

并使用以下内容替换您的jQuery代码：

$(function(){
    $('.fee_name').click(function(){
        $(this).next('.free_amt').prop('disabled', $(this).is(':checked'));
    });
});

希望有所帮助。

Answer 3

你可以这样做：

不要对多个元素使用相同的ID
如果使用，那么只有第一个获得事件

所以解决方法是：

使用类名
通过这种方式，您可以将同一个班级名称应用于单个页面中的多个元素

尝试以下方法：

注意：您必须先禁用输入类型文本。

<input class="fee_amt" type="text" placeholder="amt" 
                                                name="fees_amt[]" disabled/>

然后应用脚本

$('.fee_name').change(function() {
  $(this).siblings('.fee_amt').prop('disabled', !this.checked);
});

See the code in Action

如何选中复选框时可以编辑文本字段？

3 个答案: