我在將由@Html.CheckBoxFor()
生成的複選框設置爲滑塊時遇到問題。@ Html.CheckBoxFor作爲滑塊造型
我確定了「罪魁禍首」是隱藏的輸入字段。我做了一個fiddle來說明問題。它包含3個複選框 - 一個由@Html.CheckBoxFor()
生成,第二個使用@Html.CheckBoxFor()
生成的代碼,隱藏輸入註釋掉,第三個複選框。
您會看到第一個滑塊不起作用。我確實需要使用@Html.CheckBoxFor()
因爲我想的複選框綁定到我的模型的屬性,但無法弄清楚如何使滑蓋造型工作...
在我看來,我有:
<div class="slider">
@Html.CheckBoxFor(m => m.IsChecked, new { @class = "toggle-pill" })
@Html.LabelFor(m => m.IsChecked, new { @class = "toggle-label" })
</div>
的造型它的CSS:
.slider [type="checkbox"] {
display: none;
}
.slider .toggle-label {
display: block;
width: 40px;
height: 20px;
position: relative;
background: #ed495c;
border-radius: 10px;
transition: background 0.2s ease;
cursor: pointer;
}
.slider .toggle-label::before {
content: '';
display: block;
width: 50%;
height: 100%;
background: #ffffff;
border-radius: 50%;
box-shadow: 0 0 0 1px #d1d1d1;
position: absolute;
left: 0;
top: 0;
transition: transform 0.2s ease-in-out;
}
.slider [type="checkbox"]:checked + .toggle-label {
background: #93ed49;
}
.slider [type="checkbox"]:checked + .toggle-label::before {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
的模型屬性,IsChecked
,是typeof運算bool
。
你需要在你的問題中加入更多的代碼細節,以便添加答案。但我[分叉小提琴](https://dotnetfiddle.net/GRCvNQ)顯示,使用'@CheckBoxFor()'可以工作 - 只需要對css –
進行小修改就可以解決它了。提交答案,所以我可以接受它。謝謝 :) – kanpeki