Hide/Show if elements are checked in forms

[ben03]

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!

[dsonesuk]

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 February 22, 2018 by dsonesuk

[ben03]

Ah great, I can see this now   thanks dsonesuk for your help!