При использовании checkbox asp.net(и в случае, унаследованного от CheckBox) он отображает промежуток вокруг элемента управления флажком, этот контроль диапазона влияет на сценарии jQuery.
Можно ли удалить этот диапазон при рендеринге?
Я просто попробовал это на тестовой странице, и я не использую элементы управления CheckBox... вы уверены, что это CheckBox, который это делает? Это условно?
UPDATE: ОК, это зависит от того, имеет ли CheckBox дополнительные атрибуты, включая параметр CssClass... или атрибут "отключен".
Нашел этот полезный совет:
В Code Behind используйте атрибуты InputAttributes вместо атрибутов.
В качестве примера введите следующее:
chk.InputAttributes.Add("onchange", "updateFields()")
вместо этого:
chk.Attributes.Add("onchange", "updateFields()")
или вместо встроенных объявлений:
<asp:CheckBox ID="chk" runat="server" onchange="updateFields()" />
Последние два вызовут диапазон обертывания.
Я не знаю, будет ли это работать на этом конкретном примере. Но если вы создаете свой собственный WebControl и никогда не хотите, чтобы он отображал промежутки вокруг себя, вы можете переопределить метод визуализации Controls следующим образом:
public class MyWebControl : WebControl
{
/* Your code
between here */
protected override void Render(HtmlTextWriter writer)
{
RenderContents (writer);
}
}
Я предполагаю, что вы можете добавить то же самое к унаследованному CheckBox... что-то вроде этого:
public class MyCheckBox : CheckBox
{
/* Your code
between here */
protected override void Render(HtmlTextWriter writer)
{
RenderContents (writer);
}
}
Основная проблема с решением лучше объясняется здесь:
http://www.marten-online.com/net/stripping-span-tag-from-webcontrol.html
Я провел последние 3 часа, потянув за волосы, чтобы найти решение этой проблемы.
Вот что вышло:
using System.Web.UI;
using System.Web.UI.WebControls;
/// <summary>
/// Represents a custom checkbox web control.
/// Prevents itself to be wrapped into a <span> tag when disabled.
/// </summary>
public class CustomCheckBox : CheckBox
{
/// <summary>
/// Renders the control to the specified HTML writer.
/// </summary>
/// <param name="writer">The HtmlTextWriter object that receives the control content.</param>
protected override void Render(HtmlTextWriter writer)
{
// Use custom writer
writer = new HtmlTextWriterNoSpan(writer);
// Call base class
base.Render(writer);
}
}
Наряду с настраиваемым элементом управления вам понадобится пользовательский HtmlTextWriter:
using System.IO;
using System.Web.UI;
/// <summary>
/// Represents a custom HtmlTextWriter that displays no span tag.
/// </summary>
public class HtmlTextWriterNoSpan : HtmlTextWriter
{
/// <summary>
/// Constructor.
/// </summary>
/// <param name="textWriter">Text writer.</param>
public HtmlTextWriterNoSpan(TextWriter textWriter)
: base(textWriter)
{ }
/// <summary>
/// Determines whether the specified markup element will be rendered to the requesting page.
/// </summary>
/// <param name="name">Name.</param>
/// <param name="key">Tag key.</param>
/// <returns>True if the markup element should be rendered, false otherwise.</returns>
protected override bool OnTagRender(string name, HtmlTextWriterTag key)
{
// Do not render <span> tags
if (key == HtmlTextWriterTag.Span)
return false;
// Otherwise, call the base class (always true)
return base.OnTagRender(name, key);
}
}
Просто FYI, используя:
checkbox.InputAttributes.Add("disabled", "disabled");
имеет тот же эффект, но:
Использование JQuery
<script>
$(".selector input").unwrap().addClass("cssclass");
</script>
Вы можете напрямую использовать элемент управления input/checkbox, если вам не нужна метка, или можете поставить ее самостоятельно:
<input type="checkbox" id="CheckBox1" runat="server" />
<label for="CheckBox1">My Label</label>
Адаптер CSS может удалять span вокруг флажка/метки, но я не видел его для этой цели.
Почему бы вам не удалить диапазон с помощью . удалить с помощью jquery?
Можете ли вы использовать буквенный контроль вместо этого? Там есть большая разница между этими двумя альтернативами:
<p>12345<asp:Label ID="lblMiddle" runat="server" Text="6"></asp:Label>7890</p>
<p>12345<asp:Literal ID="ltlMiddle" runat="server" Text="6"></asp:Literal>7890</p>
Я обнаружил, что, реализуя конструктор, подобный приведенному ниже, вы можете указать тег контейнера для своего элемента управления.
public MyCustomControl() : base(HtmlTextWriterTag.Div)
{
}
Вы можете заменить HtmlTextWriterTag на любой из возможных вариантов, например Div в приведенном выше примере. По умолчанию используется Span.
protected override HtmlTextWriterTag TagKey
{
get
{
return HtmlTextWriterTag.Div;
}
}
должен делать
$(document).ready(function() {
/* remove the relative spam involving inputs disabled */
$('input[type="checkbox"]').parent('.aspNetDisabled').each(function() {
var $this = $(this);
var cssClass = $this.attr('class');
$this.children('input[type="checkbox"]').addClass(cssClass).unwrap().parent('label[for],span').first().addClass('css-input-disabled');
});
});/* CSS Example */
.css-input {
position: relative;
display: inline-block;
margin: 2px 0;
font-weight: 400;
cursor: pointer;
}
.css-input input {
position: absolute;
opacity: 0;
}
.css-input input:focus + span {
box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
}
.css-input input + span {
position: relative;
display: inline-block;
margin-top: -2px;
margin-right: 3px;
vertical-align: middle;
}
.css-input input + span:after {
position: absolute;
content: "";
}
.css-input-disabled {
opacity: .5;
cursor: not-allowed;
}
.css-checkbox {
margin: 7px 0;
}
.css-checkbox input + span {
width: 20px;
height: 20px;
background-color: #fff;
border: 1px solid #ddd;
-webkit-transition: background-color 0.2s;
transition: background-color 0.2s;
}
.css-checkbox input + span:after {
top: 0;
right: 0;
bottom: 0;
left: 0;
font-family: "FontAwesome";
font-size: 10px;
color: #fff;
line-height: 18px;
content: "\f00c";
text-align: center;
}
.css-checkbox:hover input + span {
border-color: #ccc;
}
.css-checkbox-primary input:checked + span {
background-color: #5c90d2;
border-color: #5c90d2;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Generate from asp.net -->
<label for="CheckBox1" id="Label4" class="css-input css-checkbox css-checkbox-primary">
<span class="aspNetDisabled">
<input id="CheckBox1"
type="checkbox"
checked="checked"
disabled="disabled">
</span>
<span></span>Disabled
</label>Попробуйте добавить к вашему классу конструктор, который выглядит следующим образом:
public MyControl() : base()
{
}
Если вы заметили, элементы управления будут отображаться как значения по умолчанию, так как это использует "WebControl" (если вы используете Reflector):
protected WebControl() : this(HtmlTextWriterTag.Span) { }
Ссылка: http://aspnetresources.com/blog/stripping_span_from_webcontrol
Интересно, есть ли причина, по которой никто не упоминал об этом:
public MyControl() : base(string.Empty)
я получил это чтение http://aspnetresources.com/blog/stripping_span_from_webcontrol, о котором упоминалось flaviotsf
<div class="onoffswitch">
<asp:CheckBox ID="example1" runat="server" AutoPostBack="true" OnCheckedChanged="chkWifiRequired_CheckedChanged" CssClass="aspNetDisabled onoffswitch-checkbox"/>
<label class="onoffswitch-label" for='<%= example1.ClientID.ToString() %>'>
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
/* remove the relative spam involving inputs disabled */
$('input[name=""]').parent('.aspNetDisabled').each(function () {
var $this = $(this);
var cssClass = "onoffswitch-checkbox";
$('input[name=""]').addClass(cssClass).unwrap().parent('label[for],span').first().addClass('onoffswitch-checkbox');
});
Это позволит вам использовать этот флажок в обычном режиме, все еще иметь код вызова на стороне сервера и использовать переключатель из бутстрапа. (Я использую тему Inspina, но она должна быть того же формата для других переключателей)