0

实际上，我有许多复选框和文本字段通过单个代码来自数据库。我希望当我检查特定的复选框时，复选框前面的文本是可编辑的。那我该怎么做？

这是我的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？我的文本字段仅由一个代码创建。.

4

3 回答 3

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[]']as，

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

});

JSFIDDLE

于 2013-10-17T07:55:24.690 回答
0

以下行被多次渲染：

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

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

尝试这样的事情：

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

并将您的 jQuery 代码替换为以下内容：

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

希望有帮助。

于 2013-10-17T07:34:57.850 回答
0

你可以这样做：

  1. 不要对多个元素使用相同的 id
  2. 如果使用，那么只有第一个得到事件

所以解决方法是：

  1. 改用类名
  2. 这样，您可以将相同的类名应用于单个页面中的多个元素

在下面试试这个：

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

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

然后应用脚本

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

请参阅操作中的代码

于 2013-10-17T07:37:29.990 回答