如何灰色复选框,除非单选按钮被选中?
问题描述:
非常新的javascript,但任何帮助,让我开始,将不胜感激。我有一个简单的形式:
very new to javascript, but any help to get me started would be appreciated. I have a simple form:
<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是最好的方法。提前感谢!
I want the "Fries" checkbox greyed out unless the "Burger" radio button is selected. I'm not sure if Javascript or CSS is the best way to do it. Thanks in advance!
答
我注意到你不指定是否可以使用jQuery。如果这是一个选项,请参阅其他帖子,因为我强烈推荐它。
I've noticed that you don't specify whether or not you can use jQuery. If that's an option, please see one of the other posts as I highly recommend it.
如果您不能使用jquery,请尝试以下操作:
If you cannot use jquery then try the following:
<script>
function setFries(){
var el = document.getElementById("burger");
if(el.checked)
document.getElementById("fries").disabled = false;
else
document.getElementById("fries").disabled = true;
}
</script>
<div><input type="radio" name="o1" id="burger" onchange="setFries();"/>Burger</div>
<div id="yesFries"><input type="checkbox" name="e1" id="fries" disabled="disabled"/>Fries with that?</div>
<div><input type="radio" name="o1" id="pizza" onchange="setFries();"/>Pizza</div>
<div><input type="radio" name="o1" id="hotdog" onchange="setFries();"/>Hot Dog</div>