用JS切换可用的输入/广播

Question

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

def sum13(nums):
    s = 0
    for x in nums:
        if x == 13:
            break
        s += x
    return s

my_list = [1, 5, 5, 4, 13, 7, 2]
print(sum13(my_list)) # 15

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单选按钮，则在禁用单选按钮时，将保持选中状态。

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

Answer 1

在当前代码中，radios始终引用form元素。尽管在您的情况下，该表单中唯一的元素是单选按钮，但假设这样做是有风险的。可能会有其他人出现，并添加了button，然后您的按钮开始被禁用，每个人都吓坏了。

相反，只需定位单选按钮。在下面的代码中，我用name定位了它们，因为在我认为您要定位的单选按钮之间共享。

（在语义上，我应该注意，所有表单元素（包括select元素）都应属于form，以帮助提交。如果您不将表单提交给服务器，这更少了约束。）

无论如何，我将代码简化了一点，只需要单选按钮上的一个循环即可；如果所选项目是“受限”，则将无线电设置为禁用，并将“否”项目设置为选中。如果所选项目不是“受限”，则将启用无线电并独自保留选中状态。

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>