Question

I have a span with paypal button. I must make this paypal button avialable for pressing only after user confirms TOS. For this i think to lay over the span with the paypal button another div with unchecked checkbox, opacity and z-index. The user checks the checkbox and the layed over div gets such a z-index, so the span with paypal button will be over it and can be pressed.

I need something like

HTML

<div class="with_zindex">
    <input type="checkbox​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​">
<span class="here_is_paypal_button"></span>
</div>

CSS

.with_zindex{
background-color:#fafafa;
    opacity: .5;
    filter: alpha(opacity=50);
    -moz-opacity: .5;
z-index:1000;
}
.with_zindex + input[type=checkbox]:checked {
z-index:-1000;
}

But this don’t work for me (there are only given first formattings, which are not chenged by checking / unchecking checkbox).

Answer 1

Suggestion

Instead, you can initially have the PayPal button disabled and you can enable it once the user clicks on the checkbox.

HTML (jQuery Version)

<input type="checkbox" name="terms" 
       onclick="$('#paypal').removeAttr('disabled');" />
<input type="image" name="paypal" id="paypal" disabled="disabled" />

HTML (JavaScript Version)

<input type="checkbox" name="terms" 
       onclick="document.getElementById('paypal').removeAttribute('disabled');" />
<input type="image" name="paypal" id="paypal" disabled="disabled" />

---

Else if you insist on z-index:

You need to give position: relative; for z-index to work. And there is no negative z-index!

.with_zindex {
    background-color:#fafafa;
    opacity: .5;
    filter: alpha(opacity=50);
    -moz-opacity: .5;
    position: relative;
    z-index:1000;
}
.with_zindex + input[type=checkbox]:checked {
    position: relative;
    z-index: 0;
}

---

Your required answer

HTML

<div class="with_zindex">
    <input type="Checkbox" name="TOS" value="read">
    <span class="catItemExtraFieldsValue">
        <img src="http://gutgeordnet.de/reise/images/epaypal_de.gif">
    </span>
</div>

CSS

.with_zindex {position: relative;}

.with_zindex input[type=checkbox] {
    background-color:#fafafa;
    filter: alpha(opacity=50);
    position: absolute;
    z-index: 50;
    top: 10px;
    left: -35px;
    width: 135px;
    text-align: right;
    vertical-align: top;
    cursor: pointer;
}

.with_zindex input[type=checkbox] + .catItemExtraFieldsValue {
    position: relative;
    opacity: .5;
    -moz-opacity: .5;
    z-index: 45;
}

.with_zindex input[type=checkbox]:after {
    content: 'I accept';
    font-size: 14px;
    vertical-align: top;
    line-height: 1em;
    font-weight: bold;
    font-family: tahoma;
}

.with_zindex input[type=checkbox]:checked {position: static; display: none;}

.with_zindex input[type=checkbox]:checked + .catItemExtraFieldsValue {
    position: static;
    background-color: transparent;
    opacity: 1;
    -moz-opacity: 1;
}

Fiddle: http://jsfiddle.net/praveenscience/35cQz/