如何灰色复选框，除非单选按钮被选中？ [英] How to grey out checkbox unless radio button is selected?

问题描述

非常新的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>​

的简单示例jsFiddle

这篇关于如何灰色复选框，除非单选按钮被选中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！