javascript - 如果选中复选框，则在循环中启用输入字段

Question

好的，首先我在一个循环中有一个 MySQL 结果。

<form action="index.php" method="GET" name="myform">

<table id="matrix" cellpadding="0" cellspacing="0">
<thead>
 <tr>
  <th width="5%"></th>
  <th width="5%">ID</th>
  <th width="25%">Name</th>
  <th width="15%">price</th>
  <th width="15%">count</th>
  <th width="5%">Link</th>
 </tr>
</thead>

<tbody>
 <tr id="noresults">
  <td align="center" colspan="6"><h3>No results</h3></td>
 </tr>

<?
$query = "SELECT * FROM products";

$result = mysql_query($query) or die(mysql_error());
    while ($row = mysql_fetch_array($result)) { 
        $html  = "<tr>";
        $html .= "<th><input class='ads_Checkbox' type='checkbox' name='products[]' value='".$row['pro_name']."' onclick='myFunction()'> </th>";
        $html .= "<th>".$row['pro_id']."</th>";
        $html .= "<td>".$row['pro_name']."</td>";
        $html .= "<td><input type='number' name='prices[]' id='price' value='".$row['pro_price']."' disabled></td>";
        $html .= "<td>".$row['pro_category']."</td>";
        $html .= "<td>".$row['pro_link']."</td>";
        $html .= "</tr>";
        echo $html;
    }?>
    <input type="submit" name="submit" value="Submit">
    <textarea rows="5" cols="30" id="order"></textarea>
</form>

当我勾选一个复选框时我想要什么:

• 将输入字段属性设置为“已启用”(document.getElementById("price").disabled=this.checked;)

• 获取输入字段值并将其保存在页面某处

这是我的javascript代码

<script>
        function myFunction() {
            var products = document.forms[1];
            var txt = "";
            var i;
            for (i = 0; i < products.length; i++) {
                if (products[i].checked) {
                    txt = txt + products[i].value + ", ";
                }
            }
            document.getElementById("order").value = "" + txt;
            document.getElementById("price").disabled=this.checked;
        }
</script>

show标签在这里a(现在错了)。 它现在使用一条简单的线工作，但是当我选中第二行或第三行复选框时，第一行的输入会执行我想要的操作。 :(

感谢回复!

Answer 1

您需要在动态创建的 HTML 中发送选中的对象:

      ....   

        $counter = 0; 
        while ($row = mysql_fetch_array($result)) { 
                   $counter++;
                    $html  = "<tr>";
                    $html .= "<th><input class='ads_Checkbox' type='checkbox' name='products[]' value='".$row['pro_name']."'
     onclick='myFunction(this,". $counter .")'> </th>"; //<<<<<<<<<<<<<< send the clicked checkbox to the function
                    $html .= "<th>".$row['pro_id']."</th>";
                    $html .= "<td>".$row['pro_name']."</td>";
                    $html .= "<td><input type='number' name='prices[]' 
id='price_" . $counter ."' value='".$row['pro_price']."' disabled></td>";
                    $html .= "<td>".$row['pro_category']."</td>";
                    $html .= "<td>".$row['pro_link']."</td>";
                    $html .= "</tr>";
                    echo $html;
                }?>

        ....

然后修复你的js使其兼容

<script>
        function myFunction(checkbox, level) { // <<<< add the checkbox as paremeter as well as the level (obtained via php counter)
            var products = document.forms[1];
            var txt = "";
            var i;
            for (i = 0; i < products.length; i++) {
                if (products[i].checked) {
                    txt = txt + products[i].value + ", ";
                }
            }
            document.getElementById("order").value = "" + txt;
            document.getElementById("price_" + level).disabled=checkbox.checked; // check if it is checked and assign the value
        }
</script>

编辑

我在 PHP 级别添加了一个计数器，我给每个价格一个唯一的 ID price_1、price_2...等 将这个计数器从 PHP 传递给 js 函数，并在 js 中将计数器连接到 id 以获得正确的元素。