javascript - 只读与禁用我的代码有什么问题？

Question

Readonly 与 disabled 我的代码有什么问题？

  <select id="A" onchange="change_val(A,B)">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
    </select>

<input type="text" id="B" value="Hello first time"/>


function change_val(selectbox,input_filed) {
  var sel = document.getElementById(selectbox),
  lbl = document.getElementById(input_filed);

  lbl.disabled = (sel.selectedIndex !== 0);
  if(sel.selectedIndex === 0) {
  lbl.value = 'Hello first time';
  } else {
  lbl.value = sel.options[sel.selectedIndex].value;
  }
}

当我们更改选择框时，此脚本可以与“DISABLED”输入属性一起正常工作。 但是当我尝试使用READONLY输入属性时，因为我需要提交数据但不允许更改 所以我将函数更改为如下所示:

function change_val(selectbox,input_filed) {
  var sel = document.getElementById(selectbox),
  lbl = document.getElementById(input_filed);
if(sel.selectedIndex !== 0){var readonly='readonly';}
  lbl.readonly = readonly;
  if(sel.selectedIndex === 0) {
  lbl.value = 'Hello first time';
  } else {
  lbl.value = sel.options[sel.selectedIndex].value;
  }
}

READONLY 输入字段不起作用。输入字段仍然可编辑

有人知道代码有什么问题吗？我对只读属性的误解是什么？

Answer 1

该属性称为readOnly(大写O):

lbl.readOnly = (sel.selectedIndex !== 0);

您还应该将字符串传递给函数:

<select id="A" onchange="change_val('A','B')">

DEMO