javascript 除非选中单选按钮，否则如何使复选框变灰？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12695095/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to grey out checkbox unless radio button is selected?
提问by Rich701
very new to javascript, but any help to get me started would be appreciated. I have a simple form:
对 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>
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!
除非选择了“汉堡”单选按钮，否则我希望“薯条”复选框变灰。我不确定 Javascript 或 CSS 是否是最好的方法。提前致谢！
采纳答案by Chase
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:
如果您不能使用 jquery，请尝试以下操作：
<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>?
Simple example on jsFiddle
jsFiddle 上的简单示例
回答by kristopher
what you want to do is set the elements disabled, until the state of the radio changes, that'd be done with javascript, and then you'd add/remove the disabled class in the onchange of the radio button.
您想要做的是将元素设置为禁用，直到收音机的状态发生变化，这将使用 javascript 完成，然后您将在单选按钮的 onchange 中添加/删除禁用的类。
What javascript libraries are you considering using? jQuery would make this fairly simple.
您正在考虑使用哪些 javascript 库？jQuery 会使这变得相当简单。
$('#burger').change( function () {
if ($('#burger').checked() ) {
$('#fries').removeClass('disabled');
} else {
$('#fries').addClass('disabled');
}
});
回答by 2682562
Actually with a bit CSS3 you can mock up a very simplistic solution. Here we don't gray the button out, but you make it visible just if the checkbox is checked. But, we could also gray it out with a bit more of CSS on top of this example. You will always have to consider what kind of support you want to offer. But if you are fine with it working on modern browsers, just give it a go.
实际上，通过一点 CSS3，您可以模拟一个非常简单的解决方案。在这里，我们不会使按钮变灰，但只要选中复选框，您就会使其可见。但是，我们也可以在此示例之上使用更多 CSS 将其灰化。您将始终必须考虑您想要提供什么样的支持。但是，如果您对它在现代浏览器上的工作感到满意，那就试一试吧。
Here's the HTML
这是 HTML
<label>
<input type="checkbox" name="test" />
<span>I accept terms and cons</span><br><br>
<button>Great!</button>
</label>
Here's the CSS
这是 CSS
button { display: none}
:checked ~ button {
font-style: italic;
color: green;
display: inherit;
}
And here's the DEMO http://jsfiddle.net/DyjmM/
回答by Peter Sobot
If you're using jQuery, a really-easy-to-use Javascript library (that I would highly recommend for beginners), you can do this in two steps by adding some code to a scripttag in your page containing:
如果您正在使用jQuery，这是一个非常易于使用的 Javascript 库（我强烈建议初学者使用），您可以通过向script页面中的标记添加一些代码来分两步完成此操作，其中包含：
$(function(){
$("#burger").change(function() {
if ($(this).is(':checked')) $("#fries").removeAttr("disabled");
else $("#fries").attr("disabled", true);
});
});
This code does three things:
这段代码做了三件事：
- Listens for
changeevents on#burger. - When a change occurs, execute the provided
function. - In that function, set the
disabledattribute of#friesto thecheckedproperty of#burger.
- 侦听 上的
change事件#burger。 - 当发生变化时，执行提供的
function. - 在该函数中，将 的
disabled属性设置#fries为 的checked属性#burger。
回答by ilan berci
use JQuery
使用 JQuery
$().ready(function() {
var toggleAskForFries = function() {
if($('#burger').is(':checked')) {
$('#yesFries').show()
else
$('#yesFries').hide()
}
return false
}
toggleAskForFries()
$('#burger').change(toggleAskForFries)
}
回答by Kevin Boucher
Using jQuery: http://jsfiddle.net/kboucher/cMcP5/(Also added labels to your labels)
使用 jQuery：http: //jsfiddle.net/kboucher/cMcP5/（还为您的标签添加了标签）
回答by The Alpha
You nay try this without any function library
你可以在没有任何函数库的情况下尝试这个
<input type="checkbox" name="e1" id="fries" disabled />
JS
JS
window.onload=function(){
var radios=document.getElementsByName('o1');
for(i=0;i<radios.length;i++) radios[i].onclick=checkFire;
};
function checkFire(e)
{
var fires=document.getElementById('fries');
var evt=e||window.event;
var target=evt.target||evt.srcElement;
if(target.checked && target.id==='burger') fires.disabled=false;
else
{
fires.checked=false;
fires.disabled=true;
}
}
DEMO.
演示。
