How to disable the checkmark if the switch is not selected?

Question

very new to javascript, but any help to get me started would be greatly 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 to go out if the "Burger" radio button is not selected. I'm not sure if Javascript or CSS is the best way to do this. Thanks in advance!

Answer 1

I noticed that you are not specifying if you can use jQuery. If this is an option, refer to one of the other posts, as I highly recommend it.

If you cannot use jquery, 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 jsFiddle example

Answer 2

what you want to do is to disable the elements until the state of the radio station changes, which is done using javascript, and then you add / remove the disabled class in the onchange switch.

What javascript libraries are you going to use? jQuery will make this pretty simple.

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

Answer 3

Actually with a bit of CSS3 you can mock up a very simplified solution. Here we do not serialize the button, but you make it visible only if the check box is selected. But we could also smooth this out with a bit more CSS on top of this example. You will always need to consider what kind of support you want to offer. But if you're fine with him while working on modern browsers, just let him go.

Here is the HTML

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

Here is CSS

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

And here is DEMO http://jsfiddle.net/DyjmM/

Answer 4

If you are using jQuery , a really-easy-to-use Javascript library (which I would recommend for beginners), you can do this in two steps by adding some code to the script tag on your page containing:

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

This code has three functions:

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

Answer 5

use jquery

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

Answer 6

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

Answer 7

You can try this without any functional 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 .