代码之家 › 专栏 › 技术社区 › Muiter

选中值并将输入字段更改为只读

html javascript

Muiter · 技术社区 · 6 年前

rond 在选择列表中选择 edit_type edit_maat_2 readonly 但什么都没发生。

这是我的密码:

<select class="form-control" id="edit_type['.$i.']" name="edit_type" onclick="show_dim(this, '.$i.')">
<option ';if($row_table_1['type'] == 'rond') { echo 'selected="selected"';} echo 'value="as">Staf rond</option>
<option ';if($row_table_1['type'] == 'buis') { echo 'selected="selected"';} echo 'value="buis">Buis</option>
</select>

<input type="number" class="form-control" id="edit_maat_2['.$i.']" name="edit_maat_2" value="'.$row_table_1['maat_2'].'">

<script type="text/javascript">
function show_dim(selectVeld, nr)
{
    if(document.getElementById('edit_type['+nr+']').value == 'rond') {
        document.getElementById('edit_maat_2['+nr+']').attr('readonly','readonly'); }
}
</script>

$i

当我检查这是控制台模式时,我看到以下错误: Uncaught ReferenceError: e is not defined e

有什么建议吗?

2 回复 | 直到 6 年前

mplungjan 6 年前

有几个问题,很多拼写错误。

你有“as”和“buis”的价值观-没有“rond”
.attr是jQuery,不是DOM

这可能就是你想要的

function setAccess() {
  var id = this.id.replace("edit_type", "edit_maat_2"),
    field = document.getElementById(id);
  if (this.value == "as") {
    field.setAttribute('readonly', 'readonly');
  } else {
    field.removeAttribute('readonly');
  }

}

window.addEventListener("load", function() {
  document.querySelectorAll("[id^=edit_type]").forEach(function(sel) {
    sel.addEventListener("change", setAccess);
    // Initialise the fields in case of PHP setting the selected attribute
    if ("createEvent" in document) {
      var evt = document.createEvent("HTMLEvents");
      evt.initEvent("change", false, true);
      sel.dispatchEvent(evt);
    } else {
      sel.fireEvent("onchange");
    }
  });
})

<select class="form-control" id="edit_type[1]" name="edit_type">
  <option value="as">Staf rond</option>
  <option value="buis">Buis</option>
</select>

1 <input type="number" class="form-control" id="edit_maat_2[1]" name="edit_maat_2" value="1">

<select class="form-control" id="edit_type[2]" name="edit_type">
  <option value="as">Staf rond</option>
  <option value="buis">Buis</option>
</select>

2 <input type="number" class="form-control" id="edit_maat_2[2]" name="edit_maat_2" value="2">