除非选择单选按钮，否则如何使复选框变灰？

Posted 2023-03-27

【中文标题】除非选择单选按钮，否则如何使复选框变灰？

【英文标题】：How to grey out checkbox unless radio button is selected?

【发布时间】：2012-09-23 14:09:52

【问题描述】：

对 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>

除非选中“汉堡”单选按钮，否则我希望“薯条”复选框呈灰色显示。我不确定 Javascript 或 CSS 是否是最好的方法。提前致谢！

【问题讨论】：

但我只想要薯条。 :(

【参考方案1】：

您要做的是将元素设置为禁用，直到单选的状态发生变化，这将使用 javascript 完成，然后您将在单选按钮的 onchange 中添加/删除禁用的类。

您正在考虑使用哪些 JavaScript 库？ jQuery 会让这变得相当简单。

$('#burger').change( function () 
    if ($('#burger').checked() ) 
        $('#fries').removeClass('disabled');
     else 
        $('#fries').addClass('disabled');
    
);

【参考方案2】：

实际上，您可以使用一点 CSS3 来模拟一个非常简单的解决方案。 在这里，我们不会将按钮变灰，但仅在选中复选框时才使其可见。 但是，我们也可以在这个例子的基础上使用更多的 CSS 将其变灰。 您将始终需要考虑您想要提供什么样的支持。 但是，如果您可以在现代浏览器上使用它，那就试试吧。

这是 html

<label>
    <input type="checkbox" name="test" />
    <span>I accept terms and cons</span><br><br>
    <button>Great!</button>
</label>

这是 CSS

button  display: none
:checked ~ button 
    font-style: italic;
    color: green;  
    display: inherit;

这是 DEMO http://jsfiddle.net/DyjmM/

【参考方案3】：

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

如果您不能使用 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>​

jsFiddle上的简单示例

【讨论】：

谢谢，这正是我所需要的！我似乎通过工作代码学会了更好的选择。

你应该用 Jquery 回答我们这些使用它的人。

@KolobCanyon 这里还有其他答案显示了使用 jQuery 的类似功能。鉴于 OP 特别要求 JavaScript 解决方案，这个答案就足够了。如果您有任何问题，我很乐意帮助您在 jQuery 中执行此操作。我承认 - 回顾一下，我不会使用内联事件处理程序。想法是一样的，但是如果你这样做，请使用事件绑定/委托...

【参考方案4】：

如果您正在使用jQuery，这是一个非常易于使用的 Javascript 库（我强烈建议初学者使用），您可以通过将一些代码添加到您的页面包含：

$(function()
    $("#burger").change(function() 
        if ($(this).is(':checked')) $("#fries").removeAttr("disabled");
        else $("#fries").attr("disabled", true);
    );
);

这段代码做了三件事：

在#burger 上监听change 事件。 发生变化时，执行提供的function。 在该函数中，将#fries 的disabled 属性设置为#burger 的checked 属性。

【参考方案5】：

使用 JQuery

$().ready(function() 
  var toggleAskForFries = function() 
    if($('#burger').is(':checked')) 
      $('#yesFries').show()
    else
      $('#yesFries').hide()
    
    return false
  
  toggleAskForFries()
  $('#burger').change(toggleAskForFries)

【参考方案6】：

使用 jQuery：http://jsfiddle.net/kboucher/cMcP5/（还为您的标签添加标签）

【参考方案7】：

不用任何函数库也可以试试这个

<input type="checkbox" name="e1" id="fries" disabled />

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.