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

你要做的是设置禁用的元素，直到无线电的状态发生变化，用javascript完成，然后你在单选按钮的onchange中添加/删除被禁用的类。 / p>

您正在考虑使用哪些JavaScript库？ jQuery会让这很简单。

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

Answer 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/

Answer 3

如果你正在使用jQuery，这是一个非常易于使用的Javascript库（我强烈建议初学者使用），你可以通过向{{1}添加一些代码来分两步完成页面中包含以下标记：

script

这段代码做了三件事：

在$(function(){ $("#burger").change(function() { if ($(this).is(':checked')) $("#fries").removeAttr("disabled"); else $("#fries").attr("disabled", true); }); });上收听change个活动。
发生更改时，请执行提供的#burger。
在该功能中，将function的{{1}}属性设置为disabled的{{1}}属性。

Answer 4

我注意到你没有指定是否可以使用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

上的简单示例

Answer 5

使用JQuery

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

Answer 6

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

Answer 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

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

7 个答案: