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）是在每个复选框中设置数据属性：

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

Answer 2

@eyetea的

解决方案也解决了您的非唯一ID的问题。以防您不想依赖任何ID：

$(document).ready(function(){
    $('input[name="fees_name\\[\\]]"').click(function() {
        $(this).next().children(':first').prop('disabled', !$(this).is(':checked'));
    });
});

请注意，这种选择元素在很大程度上依赖于你的dom结构，并且必须在你的html更改时进行相应的更改。

Answer 3

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

$( "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 4

使用以下代码 -

<div class="my"><?php
$i=0;
while ($ass = mysql_fetch_array($rs)) {$i++;?>
    <input type="checkbox" name="fees_name[]" id="fee_name[<?php echo $i?>]" value="<?php echo $ass['fees_name']; ?>" onChange='if(this.checked){toggleReadonly(this,true);} else{toggleReadonly(this,false)}'>&nbsp;&nbsp;
    <?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[]" readonly>
    </div> <br><br><?php 
}?>

JavaScript代码

function toggleReadonly(chk_element, status)
{
    chk_element_no=chk_element.id.substring(chk_element.id.indexOf('[')+1, chk_element.id.indexOf(']'));
    txt_element_id="fee_amt["+chk_element_no+"]";
    if(status==true)
        document.getElementById(txt_element_id).readOnly=false;
    else
        document.getElementById(txt_element_id).readOnly=true;
}

检查 fiddle 。

检查以下类似示例代码并执行 -

1.PHP

<html>
<head>
    <script>
        function toggleReadonly(chk_element, status)
        {
            chk_element_no=chk_element.id.substring(chk_element.id.indexOf('[')+1, chk_element.id.indexOf(']'));
            txt_element_id="fee_amt["+chk_element_no+"]";
            if(status==true)
                document.getElementById(txt_element_id).readOnly=false;
            else
                document.getElementById(txt_element_id).readOnly=true;
        }
    </script>
</head>
<body>
    <div class="my"><?php
    $i=0;
    while ($i++<=10) {?>
        <input type="checkbox" name="fees_name[]" id="fee_name[<?php echo $i;?>]" value="<?php echo $i; ?>" onChange='if(this.checked){toggleReadonly(this,true);} else{toggleReadonly(this,false)}'>&nbsp;&nbsp;
        <?php echo $i; ?> 
        <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[]" readonly>
        </div> <br><br><?php 
    }?>
</div> 
</body>
</html>

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

4 个答案:

1.PHP