因此,我正在尝试编写仅包含一行的表中的表单。该行包含一个下拉框,文本框和一个复选框。
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。我宁愿不这样对每个特定行进行硬编码。
答案 0 :(得分:2)
您正在重复元素的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选中所有复选框。
答案 1 :(得分:1)
因为您的ID是通用的,这就是为什么他们只考虑第一行而不是公共ID使用动态ID的原因。