对于尝试处理复选框的人来说,这些解决方案都不起作用,因为你需要它成为HTML输入(而不是HTML按钮)。
SPArcheon的答案在添加type="checkbox"
后就不起作用了,这是代码后端中.checked
运算符所需的。一旦添加了type="checkbox"
,HTML输入框中就没有OnServerClick
、ServerClick
或CheckedChanged
。你只有ServerChanged
,但它是无用的,因为它需要完整的页面刷新。
实际上,我不得不使用CSS来使HTML按钮类似于复选框,使用Bootstrap的btn-outline-secondary类作为起点。
.btn-checkbox-unchecked {
padding: .35rem .35rem !important;
font-size: .875rem !important;
line-height: .5 !important;
border-radius: .15rem !important;
border-width: .20em !important;
}
.btn-checkbox-checked {
padding: .1rem .1rem !important;
font-size: .6rem !important;
line-height: .5 !important;
border-radius: .15rem !important;
border-width: .20em !important;
border-color: #0060df !important;
background-color: #0060df !important;
}
.btn-checkbox:hover {
border-color: #676774 !important;
background-color: #0250BB !important;
}
在aspx文件中:
<button class="btn btn-xs btn-outline-secondary" id="btnFakeCheckbox" runat="server" clientidmode="static" autopostback="true" data-bs-toggle="button" autocomplete="off"></button>
然后在您的代码后台,您可以相应地设置属性(类)
当它被选中时:
btnFakeCheckbox.Attributes.Add("class", "btn btn-xs btn-secondary btn-checkbox-checked active")
btnFakeCheckbox.Attributes("aria-pressed") = "true"
btnFakeCheckbox.InnerHtml = "<i class='fas fa-check'></i>"
当它未被选中时:
btnFakeCheckbox.Attributes.Add("class", "btn btn-xs btn-outline-secondary btn-checkbox-unchecked")
btnFakeCheckbox.Attributes("aria-pressed") = "false"
btnFakeCheckbox.InnerHtml = ""
(请注意最后一行的字体Awesome复选框图标,您将需要在您的aspx中包含它)
这是一个非常荒谬的解决方法,用于解决更加荒谬的框架问题。如果有人有一个Bootstrap 5开关切换的解决方案,请告诉我。