asp.net mvc razor slip 复选框无法点击检查答案

【问题标题】：asp.net mvc razor slip checkbox can not hit to checkasp.net mvc razor slip 复选框无法点击检查
【发布时间】：2018-06-13 22:10:09
【问题描述】：

我在 asp.net mvc 项目中的视图有问题。我在这个视图上添加了新的 checkboxFor 元素：

  <div class="col-md-6">
    <div class="form-group">
       <div class="checkbox clip-check check-primary">
          @Html.CheckBoxFor(x => x.IsHomePage)
          <label for="isHomePage">
             Is Home Page
          </label>
       </div>
    </div>
  </div>

这是我的 CSS：

.clip-check {
margin-bottom: 10px;
margin-top: 10px;
padding-left: 0;
 }

.clip-check label {
    cursor: pointer;
    display: inline-block;
    font-size: 13px;
    margin-right: 15px;
    padding-left: 30px !important;
    position: relative;
    line-height: 23px;
    transition: border 0.2s linear 0s, color 0.2s linear 0s;
    white-space: nowrap;
}

    .clip-check label:before {
        background-color: #ffffff;
        border: 1px solid #c8c7cc;
        content: "";
        display: inline-block;
        height: 20px;
        left: 0;
        margin-right: 10px;
        position: absolute;
        width: 20px;
        border-radius: 0;
        top: 1px;
        transition: border 0.2s linear 0s, color 0.2s linear 0s;
    }

    .clip-check label:after {
        display: inline-block;
        font-size: 11px;
        height: 19px;
        left: 4px;
        position: absolute;
        top: -1px;
        transition: border 0.2s linear 0s, color 0.2s linear 0s;
        width: 19px;
    }

.clip-check input[type="checkbox"] {
    display: none;
}

    .clip-check input[type="checkbox"]:checked + label:before {
        border-width: 10px;
    }

    .clip-check input[type="checkbox"]:checked + label:after {
        color: #fff;
        content: "\f00c";
        font-family: "FontAwesome";
    }

    .clip-check input[type="checkbox"][disabled] + label {
        opacity: 0.65;
    }

        .clip-check input[type="checkbox"][disabled] + label:before {
            background-color: #F8F8F8;
        }

但是在从浏览器构建和检查后，我无法点击选中此复选框，即使我也成功完成了其他复选框。我正在使用引导程序。非常感谢任何帮助，谢谢。

【问题讨论】：

我不明白您所说的“但是在构建并从浏览器检查后，我无法点击选中此复选框”。你的意思是点击标签不会切换复选框？
哪个复选框无法切换其状态（选中/未选中）？除了在框内单击之外，还有什么其他方式可以“选中”复选框？
@GeorgPatscheider：是的，我的意思是点击浏览器中的复选框

标签： asp.net-mvc razor bootstrap-4

【解决方案1】：

我刚刚仔细检查了您的 css，您为标签元素编写了所有内容。您已经隐藏了复选框输入并通过 css 绘制了矩形。请看这段代码：

.clip-check label {
cursor: pointer;
display: inline-block;
font-size: 13px;
margin-right: 15px;
padding-left: 30px !important;
position: relative;
line-height: 23px;
transition: border 0.2s linear 0s, color 0.2s linear 0s;
white-space: nowrap;
}

.clip-check label:before {
    background-color: #ffffff;
    border: 1px solid #c8c7cc;
    content: "";
    display: inline-block;
    height: 20px;
    left: 0;
    margin-right: 10px;
    position: absolute;
    width: 20px;
    border-radius: 0;
    top: 1px;
    transition: border 0.2s linear 0s, color 0.2s linear 0s;
}

.clip-check label:after {
    display: inline-block;
    font-size: 11px;
    height: 19px;
    left: 4px;
    position: absolute;
    top: -1px;
    transition: border 0.2s linear 0s, color 0.2s linear 0s;
    width: 19px;
}

因此，如果您的标签未准确指向带有 Id 的复选框输入 IsHomePage（将从 asp.net 服务器呈现的内容），则样式将不会更改 :after。所以你的问题在这里：

<label for="isHomePage">

请将isHomePage 更改为IsHomePage，因为您的字段名称是IsHomePage。

【讨论】：