Css 复选框如何更改div'；sz指数？

我有一个与贝宝按钮跨度。我必须使这个贝宝按钮可按下只有在用户确认TOS。对于这一点，我想用paypal按钮覆盖另一个带有未选中复选框、不透明度和z索引的div。用户选中复选框，layed-over div就会得到这样一个z-index，这样paypal按钮就会在上面，并且可以按下

我需要像这样的东西

HTML

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

但这对我不起作用（只有给定的第一个格式，不能通过选中/取消选中复选框来实现）。

建议 相反，您可以先禁用PayPal按钮，然后在用户单击复选框后启用它

HTML（jQuery版本）

---

你需要的答案 HTML 小提琴：我是这样得到的：

HTML:

<input class="Checkbox1" name="TOS" id="TOS" value="read" type="checkbox";"/>

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;
}

var $K2 = jQuery.noConflict();

 $K2(document).ready(function(){

//$K2('#TOS').attr('checked', false);
//$K2('input[type=image]').attr("class", "agbunchecked");
//$K2('input[type=image]').bind("click", giveAllert);

if(!$K2('#TOS').attr('checked')) //Existenzcheck
{
    $K2('input[type=image]').attr("class", "agbunchecked");
    $K2('input[type=image]').bind("click", giveAllert);
}

function giveAllert()
{
    alert("\Pleas check the checkbox!");
    return false;
}

$K2('#TOS').change(function(event){
    if(this.checked) 
    {
        $K2('input[type=image]').attr("class", "agbchecked");
        $K2('input[type=image]').unbind("click");
    }
    else
    {
        $K2('input[type=image]').attr("class", "agbunchecked");
        $K2('input[type=image]').bind("click", giveAllert)
    }
});

  });

.agbunchecked{
background-color:#fafafa;
opacity: .5;
filter: alpha(opacity=50);
-moz-opacity: .5;
}

---

为什么不尝试根据复选框的状态启用/禁用paypal按钮？为什么这个z索引解决方案对我不起作用？应用了.with_zindex的css，但paypal按钮是可点击的，即使复选框也未选中。在我选中复选框并用firebug查看代码后，复选框没有“选中”的标签。伙计，你读了我的回答了吗？您需要给出

位置：相对用于
z-index
工作。而且没有负的z指数！当然，我读过并使用过它，就像你说的：位置：相对；对于div，没有负z-指数。有你的问题。
+
运算符仅用于选择同级。不是孩子。在这里查看更新的小提琴：@ChillyBang感谢并欢迎！：）
<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>

.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;
}

<input class="Checkbox1" name="TOS" id="TOS" value="read" type="checkbox";"/>

var $K2 = jQuery.noConflict();

 $K2(document).ready(function(){

//$K2('#TOS').attr('checked', false);
//$K2('input[type=image]').attr("class", "agbunchecked");
//$K2('input[type=image]').bind("click", giveAllert);

if(!$K2('#TOS').attr('checked')) //Existenzcheck
{
    $K2('input[type=image]').attr("class", "agbunchecked");
    $K2('input[type=image]').bind("click", giveAllert);
}

function giveAllert()
{
    alert("\Pleas check the checkbox!");
    return false;
}

$K2('#TOS').change(function(event){
    if(this.checked) 
    {
        $K2('input[type=image]').attr("class", "agbchecked");
        $K2('input[type=image]').unbind("click");
    }
    else
    {
        $K2('input[type=image]').attr("class", "agbunchecked");
        $K2('input[type=image]').bind("click", giveAllert)
    }
});

  });

.agbunchecked{
background-color:#fafafa;
opacity: .5;
filter: alpha(opacity=50);
-moz-opacity: .5;
}