除非选中单选按钮,否则如何灰显复选框？

Question

非常新的JavaScript,但任何帮助让我开始将不胜感激.我有一个简单的形式:

<div><input type="radio" name="o1" id="burger" />Burger</div>
<div id="yesFries"><input type="checkbox" name="e1" id="fries" />Fries with that?</div>
<div><input type="radio" name="o1" id="pizza" />Pizza</div>
<div><input type="radio" name="o1" id="hotdog" />Hot Dog</div>

除非选中"Burger"单选按钮,否则我希望"Fries"复选框显示为灰色.我不确定Javascript或CSS是否是最好的方法.提前致谢!

Answer 1

我注意到您没有指定是否可以使用 jQuery。如果这是一个选项，请参阅我强烈推荐的其他帖子之一。

\n\n

如果您无法使用 jquery，请尝试以下操作：

\n\n

<script>\n  function setFries(){\n    var el = document.getElementById("burger");\n    if(el.checked)\n      document.getElementById("fries").disabled = false;\n    else\n     document.getElementById("fries").disabled = true;    \n  }  \n</script>\n\n\n<div><input type="radio" name="o1" id="burger" onchange="setFries();"/>Burger</div>\n<div id="yesFries"><input type="checkbox" name="e1" id="fries" disabled="disabled"/>Fries with that?</div>\n<div><input type="radio" name="o1" id="pizza" onchange="setFries();"/>Pizza</div>\n<div><input type="radio" name="o1" id="hotdog" onchange="setFries();"/>Hot Dog</div>\xe2\x80\x8b\n

\n\n

jsFiddle上的简单示例

\n