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

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

次のコードを使用します-

<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 に答える