Question

因此，我正在尝试编写仅包含一行的表中的表单。该行包含一个下拉框，文本框和一个复选框。

import * as d3 from 'd3';
import * as d3SelectionMulti from 'd3-selection-multi';
.
.
  var duration = 5000;
  var posicionFinal = 250;
  var posicionActual = 0;
  var segundosDuracion = 0;
  var oProperties = { x: posicionFinal, fill: "red" };
  rectangle
    .datum(oProperties)
    .transition()
    .duration(duration)
    .ease(d3.easeLinear)
    .attrs(oProperties)

如您所见，我使用了Javascript，因此如果选中此复选框，则文本框将被禁用。

<table class="table text-size-12">
            <thead>
            <tr>
                <th scope="col">Location</th>
                <th scope="col" class="text-nowrap">COD Charge</th>
                <th scope="col">Allow Negotiate</th>
            </tr>
            </thead>
            <tbody>
            <?php
                for($rows = 0; $rows < 5; $rows++):
            ?>
                <tr>
                    <td>
                        <select name="location" class="form-control" style="width:250px">
                            <option value="">--- Select Location ---</option>
                            <?php foreach ($locations as $state): ?>
                                <optgroup label="--- <?= $state->name ?> ---">
                                    <?php foreach ($state->locations as $area): ?>
                                        <option value="{{ $key }}"><?= $area->name ?></option>
                                    <?php endforeach ?>
                                </optgroup>
                            <?php endforeach ?>
                        </select>
                    </td>
                    <td>
                        <input type="text" id="shipping_fee_value">
                    </td>
                    <td>
                        <input type="checkbox" id="shipping_fee_allow_negotiate">
                        <script>
                            document.getElementById('shipping_fee_allow_negotiate').onchange = function (){
                                document.getElementById('shipping_fee_value').disabled = this.checked;
                            }
                        </script>
                    </td>
                </tr>
            <?php endfor ?>
            </tbody>
        </table>

我还使用<td> <input type="text" id="shipping_fee_value"> </td> <td> <input type="checkbox" id="shipping_fee_allow_negotiate"> <script> document.getElementById('shipping_fee_allow_negotiate').onchange = function (){ document.getElementById('shipping_fee_value').disabled = this.checked; } </script> </td>将行循环了5次。我的问题是，禁用复选框的文本框脚本仅在第一行有效，如何允许每一行独立？

P.S。我宁愿不这样对每个特定行进行硬编码。

Answer 1

您正在重复元素的ID。你做不到id是唯一的。在每个元素上设置唯一的ID。

<td>
    <input type="text" id="shipping_fee_value_<?= $rows ?>">
</td>
<td>
    <input type="checkbox" class="shipping_fee_allow_negotiate" data-target="shipping_fee_value_<?= $rows ?>">
    <script>
        var elements = document.getElementsByClassName('shipping_fee_allow_negotiate');
        for (var i = 0; i < elements.length; i++) {
            elements[i].onchange = function() {
                document.getElementById(this.dataset.target).disabled = this.checked;
            }
        }
    </script>
</td>

在这里，我们使用$row变量在输入的id属性中添加索引。

<input type="text" id="shipping_fee_value_0"/>

我们还使用复选框上的data-target属性来告诉他在onchange回调中要处理哪个特定输入。

<input type="checkbox" class="shipping_fee_allow_negotiate" data-target="shipping_fee_value_0">

最后，分配回调的选择器使用getElementsByClassName选中所有复选框。

Answer 2

因为您的ID是通用的，这就是为什么他们只考虑第一行而不是公共ID使用动态ID的原因。

循环表格中的表格行

2 个答案: