Question

我有四个字段，其中两个是文本输入字段，另一个是单选按钮。问题是我希望仅在选择相应的单选按钮后才启用文本字段。

我尝试了单选标记中的onclick和oncheck函数，但是它可以启用文本框，但不能使用

<html>

<body>
  <input type="radio" name="type" value="customurl" onclick="document.getElementById('text').removeAttribute('disabled')">
  <input type="text" id="text" name="custom1" placeholder="should be 5 charecters at least" disabled>
  <input type="radio" name="type" value="customurl" onclick="document.getElementById('sel').removeAttribute('disabled')">
  <input type="text" id="sel" name="custom2" placeholder="should be 5 charecters at least" disabled>
</body>

</html>

如果我选择radio1 textbox1已启用，而选择单选时，textbox2已启用但textbox1未禁用

Answer 1

除了删除目标元素上的disabled属性外，您还希望对其他元素上的disabled属性进行设置。可以通过 .setAttribute('disabled', true) 完成。

您还希望删除onclick事件处理程序，并使用 unobtrusive JavaScript 的 adding an event listener 。我已经使用.getElementsByTagName()来定位相关输入。

这可以在下面看到：

document.getElementsByTagName('input')[0].addEventListener('click', function() {
  document.getElementById('text').removeAttribute('disabled');
  document.getElementById('sel').setAttribute('disabled', true);
});

document.getElementsByTagName('input')[2].addEventListener('click', function() {
  document.getElementById('sel').removeAttribute('disabled');
  document.getElementById('text').setAttribute('disabled', true);
});

<input type="radio" name="type" value="customurl">
<input type="text" id="text" name="custom1" placeholder="should be 5 charecters at least" disabled>
<input type="radio" name="type" value="customurl">
<input type="text" id="sel" name="custom2" placeholder="should be 5 charecters at least" disabled>

输入字段必须禁用，直到选中单选按钮

1 个答案: