Jump to content

Hide/Show if elements are checked in forms


Recommended Posts

Hi there,

  I am trying  to only allow a 'next' button to show if a form element is selected. For some reason I am only succeeding to hide the button, and not reveal when the radio button is selected. I am sure it should be relatively simple...

The code:

.ampwizard .button {opacity: 0;}

input[type="radio"]:checked .ampwizard .button{opacity: 1;}

<div class="ampwizard"><input type="submit" class="button" name="install-next" value="Next" /></div>

Help appreciated with thanks!

Link to comment
Share on other sites

Its looking for class 'ampwizard' child element, which an input can't have because its a void element (self closes, no closing tag, like a div element would have).

You would have to maybe use  '+' next following sibling or '~' any siblings element following it.

Note: Even though you have made it totally transparent, its STILL click-able, try visibility: instead.

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...