How to grey out checkbox unless radio button is selected?

Question

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>

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!

Forefront

But I just want fries. :( – Vieva

Answer 1

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.

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

Simple example on jsFiddle

Gules

Thank you, that is exactly what I needed! I seem to learn better picking through working code. – Forefront

You should answer in Jquery for those of us using it as well. – Bellamy

@KolobCanyon There are other answers here that show similar functionality using jQuery. Given the OP specifically asked for a JavaScript solution, this answer is adequate. I'd be more than happy to help you do this in jQuery if you're have any issues though. I'll admit - looking back at this I wouldn't use inline event handlers. The idea is the same, but please use event binding / delegation if you're doing this... – Gules

Answer 2

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.

What javascript libraries are you considering using? jQuery would make this fairly simple.

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

Troy

Answer 3

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.

Here's the HTML

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

Here's the CSS

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

And here's the DEMO http://jsfiddle.net/DyjmM/

Bosket

Answer 4

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 script tag in your page containing:

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

This code does three things:

• Listens for change events on #burger.
• When a change occurs, execute the provided function.
• In that function, set the disabled attribute of #fries to the checked property of #burger.

Earthworm

Answer 5

use JQuery

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

Pistoia

Answer 6

Using jQuery: http://jsfiddle.net/kboucher/cMcP5/ (Also added labels to your labels)

Peisch

Answer 7

You nay try this without any function library

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

Mutation