8

对 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 是否是最好的方法。提前致谢！

4

7 回答 7

3

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

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

$('#burger').change( function () {
    if ($('#burger').checked() ) {
        $('#fries').removeClass('disabled');
    } else {
        $('#fries').addClass('disabled');
    }
});
于 2012-10-02T17:24:56.573 回答
3

实际上，您可以使用一点 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;
}

这是演示http://jsfiddle.net/DyjmM/

于 2013-08-14T22:01:35.717 回答
2

如果您使用的是jQuery，一个非常易于使用的 Javascript 库（我强烈推荐给初学者），您可以通过将一些代码添加到页面中的标签来分两步执行此操作，其中script包含：

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

这段代码做了三件事：

  • 监听 上的change事件#burger。
  • 当发生变化时，执行提供的function.
  • 在该函数中，将 的disabled属性设置#fries为 的checked属性#burger。
于 2012-10-02T17:24:55.233 回答
2

我注意到您没有指定是否可以使用 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上的简单示例

于 2012-10-02T17:35:09.300 回答
0

使用 jQuery

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

于 2012-10-02T17:26:33.510 回答
0

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

于 2012-10-02T17:27:20.067 回答
0

您可以在没有任何函数库的情况下尝试这个

<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;
    }
}

演示。

于 2012-10-02T17:49:21.190 回答