2

实际上，我有许多复选框和文本字段通过单个代码来自数据库。当我选中一个特定的复选框时，我需要它，然后该复选框前面的文本字段变得可编辑。我怎样才能做到这一点 ？

这是我的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'));
    });
});

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

4

4 回答 4

1

所有启用/禁用的文本字段都具有相同的 ID。尝试在循环内设置一个不同的 id，并在您的 javascript 中根据选中的复选框启用一个。另一种方法（不使用 ids）是在每个复选框中设置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'))
  });
});
于 2013-10-17T07:12:40.687 回答
0

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

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

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

于 2013-10-17T07:18:56.047 回答
0

这是您需要的工作代码，

$( "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-17T08:32:19.753 回答
0

使用以下代码 -

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

检查这个小提琴。

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

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>
于 2013-10-17T08:52:33.240 回答