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!

Share this post

Link to post
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

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...