Question

我在此代码段中禁用了textarea：

function toggleDisabled(_checked,id) {
  document.getElementById(id).readOnly = !_checked;
}

<input type="checkbox" name="no" value="1" onchange="toggleDisabled(this.checked,'new_order')">
<textarea name="noa" id="new_order">FOOO</textarea>
<input type="text"  name="noo" id="new_order">

现在，当我选中复选框时，我希望输入文本被禁用。这样textarea和input：text都将被禁用。

我尝试添加我用作textarea ID的id，但是输入：text和textarea是冲突的，因为readOnly仅用于textarea。

所以我需要一种方式tp说如果textarea禁用这样......，如果输入禁用这样......

Answer 1

id必须是唯一的！切勿对多个元素使用相同的ID。
下面的代码选择所有具有类new_order的元素，然后迭代然后禁用或启用。看看

＆＃13;

function toggleDisabled(self) {
  var inputs = document.getElementsByClassName('new_order');
  for (var i = 0; i < inputs.length; i++){
    inputs[i].disabled = self.checked;
  }
}

＆＃13;

<input type="checkbox" name="no" value="1" onchange="toggleDisabled(this)">
<textarea name="noa" class="new_order">FOOO</textarea>
<input type="text" name="noo" class="new_order">

＆＃13;

Answer 2

当您多次使用id时会出现问题... ID应该是唯一的。如果你使用类，它应该工作：

function toggleDisabled(_checked, selector) {
	document.querySelectorAll(selector).forEach((el) => {
  	el.readOnly = _checked;
  });
}

<input type="checkbox" name="no" value="1" onchange="toggleDisabled(this.checked,'.new_order')">
<textarea name="noa" class="new_order">FOOO</textarea>
<input type="text"  name="noo" class="new_order">

同时禁用textarea和输入

2 个答案: