使用JS切换可用输入/无线功能

Question

我正在尝试创建一个用户输入窗体，该窗体将根据先前的输入禁用/启用输入。

​

var test = document.getElementById("type");
console.log(test.value);

if (test.value == 'Limited') {
  console.log('should be disabled');
  var radios = document.getElementById("disableme");
  for (var i = 0, iLen = radios.length; i < iLen; i++) {
    radios[i].disabled = true;
  }
}

function toggle() {
  if (test.value == 'Limited') {
    console.log('should be disabled');

    var radios = document.getElementById("disableme");
    for (var i = 0, iLen = radios.length; i < iLen; i++) {
      radios[i].disabled = true;
    }

  } else if (test.vlaue !== 'Limited') {
    console.log('should be enabled');
    var radios = document.getElementById("disableme");
    for (var i = 0, iLen = radios.length; i < iLen; i++) {
      radios[i].disabled = false;
    }
  }
}

<select id="type" name="type" placeholder="" style="width: 300px" onchange="toggle()">
  <option>Administrator
  <option>Elevated
  <option selected="selected">Limited
</select>
<form name="disableme" id="disableme">
  Alerts & Messages : Yes <input type="radio" name="alert" id="alert" value='1'> No <input type="radio" name="alert" id="alert" checked="checked" value='0'>
</form>

​

以下是我的页面在加载时的当前外观：

​

在选择了limited选项的情况下，我希望禁用这两个单选按钮，并选中no单选按钮。如果用户选择Administrator或Elevated，我希望启用这些单选按钮。我已经走到这一步了。

我现在唯一的问题是，当我切换回limited时，选中yes单选按钮后，yes将保持选中状态，而单选按钮被禁用。

您将看到我的单选按钮具有相同的名称/id。这样做是为了防止同时选择这两个选项。

Answer 1

在您当前的代码中，radios总是引用form元素。而在您的情况下，该表单中唯一的元素是单选按钮，假设这样做是有风险的。其他人可能会来添加一个button，然后你的按钮开始被禁用，每个人都抓狂了。

相反，只要瞄准单选按钮即可。在下面的代码中，我通过name将它们作为目标，因为它在我认为您想要作为目标的单选按钮之间共享。

(我应该注意，从语义上讲，所有表单元素(包括select元素)都应该属于一个form，以便帮助提交。如果您没有将表单提交到服务器，这就不是什么限制了。)

在任何情况下，我都将代码简化了一点，只需要在单选按钮上执行一次循环；如果选择的项是"Limited"，它会将无线电设置为disabled，并将"No“项设置为选中。如果所选项目不是“受限”，则会启用无线电并保持选中状态。

​

var test = document.getElementById("type");

function toggle() {
  console.log(test.value);
  var radios = document.querySelectorAll('input[name="alert"]');
  for (var i = 0, iLen = radios.length; i < iLen; i++) {
    radios[i].disabled = test.value == 'Limited';
    if (test.value == 'Limited') {
      radios[i].checked = radios[i].value === '0';
    }
  }
}

toggle();

<select id="type" name="type" placeholder="" style="width: 300px" onchange="toggle()">
  <option>Administrator</option>
  <option>Elevated</option>
  <option selected="selected">Limited</option>
</select>
<form name="disableme" id="disableme">
  Alerts & Messages : Yes <input type="radio" name="alert" id="alert" value='1'> No <input type="radio" name="alert" id="alert" checked="checked" value='0'>
</form>

​