Question

148

How to grey out checkbox unless radio button is selected?

rated 0 times [ 151] [ 3] / answers: 1 / hits: 20999 / 12 Years ago, tue, october 2, 2012, 12:00:00

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!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dominics

Add To Favorites

Follow

Total Points: 424

Total Questions: 99

Total Answers: 107

Location: South Korea

Member since Fri, Sep 11, 2020

4 Years ago

dominics questions

1 react setState() not triggering re-render

Wed, Apr 6, 22, 00:00, 2 Years ago

1 export a variable inside a function to be used in other modules

Mon, Feb 7, 22, 00:00, 2 Years ago

1 how to make TextInput with dropdown/picker in react-native?

Thu, Jan 13, 22, 00:00, 2 Years ago

1 How to remove extra empty space and scroll bar at the bottom of my html page?

Wed, Jan 20, 21, 00:00, 3 Years ago

1 AgGrid: applyColumnState is not a function

Fri, Sep 18, 20, 00:00, 4 Years ago

View All

answered 12 Years ago trinityr · Accepted Answer

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