html无法点击复选框

Question

这是我的HTML：

<div style="width: 45%; float: left; margin-left:5%">
                    <div class="chartHeaderClass" style="width: 100%;">
                        <h3>Service Level Per Campaign</h3>
                        <%-- Start Dropdown Code --%>
                        <a id="DropdownSeviceLink" href="#">+</a>
                        <div ID="campaignDiv" runat="server" ><ul>

                                              </ul>
                        </div>
                        <script type="text/javascript" src="Scripts/DropdownCheckbox.js"></script>
                        <%-- End Dropdown Code --%>
                    </div>
                    <div id="line-chart" class="chart-holder" style="border:1px solid #D5D5D5; margin-top:2px">
                        <canvas class="overlay" width="479" height="265"></canvas>
                    </div>
                </div>
                <div style="width: 45%; float: right">
                    <div class="chartHeaderClass" style="width: 100%;">
                        <h3>Calls Per Campaign</h3>
                    </div>
                    <div id="pie-chart" class="chart-holder" style="border:1px solid #D5D5D5; margin-top:2px">
                        <canvas class="overlay" width="479" height="265"></canvas>
                    </div>
                </div>

注意它有这个div campaignDiv我填写c＃就像这样：

if (!IsPostBack) {
                List<string> comps = getCompainNames();
                string html = "<ul>";
                for (int i = 0; i < comps.Count(); i++) {
                    html = html + CreateLiCheckbox(comps[i]);
                }
                html = html + "</ul>";
                campaignDiv.InnerHtml = html;
            }
private string CreateLiCheckbox(string checkBoxText)
        {
            return string.Format("<li><input type=\"checkbox\">{0}</li>", checkBoxText);
        }

结果如下：

我无法点击复选框。换句话说，当我点击它们时没有任何事情发生

我发现了一些

我无法选择红色区域内的文字。它似乎没有退出，因为当我尝试使用the mouse选择它时，没有任何内容被选中。

你可以帮忙吗？

这个红色区域的

css是

#DropdownSeviceLink {
    float:right;
    margin-right:10px;
}
a#DropdownServiceLink:visited {
    color:inherit;
}
#campaignDiv {
    background-color:red;
    width:200px;
    height:200px;
    float:right;
    position:relative;
}

最后我的页面的上下文是

当点击plus符号时，我想显示这个红色区域，我可以在jquery上执行此操作，但我只是告诉你上下文可能有帮助

的jsfiddle

http://jsfiddle.net/jdhMs/

Answer 1

我在我的应用程序中遇到了同样的问题，结果发现我的复选框中的div与模态框的页脚重叠。由于模态框的页脚是白色/透明的，所以在我在页脚周围添加边框之前，这并不明显。只有这样我才能看到我可以看到复选框但却无法实际选择它们。

Answer 2

我不知道它的工作与否，但试试Z-Index。

示例：

#campaignDiv {
   Z-Index:100;
}

li{
   Z-Index:101;
}