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!

But I just want fries. :( – Robert Harvey Oct 02 '12 at 17:21 — Robert Harvey, Oct 02 '12 at 17:21

score 3 · Answer 1 · answered Oct 02 '12 at 17:24

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

score 3 · Answer 2 · answered Aug 14 '13 at 22:01

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/

Peter Sobot · Answer 3 · 2012-10-02T17:30:09.007

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.

score 2 · Accepted Answer · answered Oct 02 '12 at 17:35

2

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

answered Oct 02 '12 at 17:35

Chase

29,019
1
49
48

Thank you, that is exactly what I needed! I seem to learn better picking through working code. – Rich701 Oct 03 '12 at 17:07
You should answer in Jquery for those of us using it as well. – Kellen Stuart May 27 '16 at 19:43
@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... – Chase May 27 '16 at 21:05

score 0 · Answer 5 · answered Oct 02 '12 at 17:26

use JQuery

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

score 0 · Answer 6 · answered Oct 02 '12 at 17:27

0

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

answered Oct 02 '12 at 17:27

Kevin Boucher

16,426
3
48
55

The Alpha · Answer 7 · 2012-10-02T17:59:08.963

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.

How to grey out checkbox unless radio button is selected?

7 Answers7

Linked