javascript - 对两个 ID 应用函数

Question

我有以下功能：

<script>  function setFries(){
var el = document.getElementById("burger");
if(el.checked)
  document.getElementById("opt1").disabled = false;
else
 document.getElementById("opt1").disabled = true; }  </script>

如果选择了单选，这会使选择框变为非灰色。

我有另一个选择框，我想成为非灰色的两个，ID 为“opt2”

我将如何将其添加到上述函数中。

我努力了：

  document.getElementById("opt1").disabled && document.getElementById("opt2").disabled

以及对此的一些变化，但无法使其正常工作。

Answer 1

就这样？

function setFries() {
    var el = document.getElementById("burger");
    if (el.checked) {
        document.getElementById("opt1").disabled = false;
        document.getElementById("opt2").disabled = false;
    } else {
        document.getElementById("opt1").disabled = true;
        document.getElementById("opt2").disabled = true;
    }
}

Answer 2

<script>
function setFries(){
    var el = document.getElementById("burger");
    document.getElementById("opt1").disabled = document.getElementById("opt2").disabled = !e1.checked;
</script>

干净优雅。

Answer 3

function setFries(){
  var el = document.getElementById("burger");
  document.getElementById("opt1").disabled =document.getElementById("opt2").disabled= !el.checked;
}

但是，更好的方法是将相同的 CSS 类分配给两者并根据类进行更改。例如：

function setFries(){
   var el = document.getElementById("burger");    
   document.getElementsByClassName('yourCommonClassName').disabled = !el.checked;
}

Answer 4

目前，您对 if 和 else 分支的操作​​是单个语句。您需要将它们变成块，以便在条件为真或假时可以执行更多操作：

if (...) { // notice the brackets
  // action 1
  // action 2
} else {
  // action 3
  // action 4
}

a && b是一个逻辑运算。你不需要那个。要执行两个操作，您只需一个接一个地编写它们：

document.getElementById("opt1").disabled = false;
document.getElementById("opt2").disabled = false;

最后，您可以像处理汉堡一样提取元素以更改变量，因此代码更易于阅读。

完整示例：

<script>  
function setFries(){
  var el = document.getElementById("burger");
  var opt1 = document.getElementById("opt1");
  var opt2 = document.getElementById("opt2");
  if(el.checked) {
    opt1.disabled = false;
    opt2.disabled = false;
  } else {
    opt1.disabled = true;
    opt2.disabled = true;
  }
</script>