Why does ASP.Net RadioButton and CheckBox render inside a Span?

Question

I would expect this:

Answer 1

This was driving me crazy too until I found the inputAttributes property.

For example, here is how to add a class directly on the checkbox control without the span nonsense:

myCheckBoxControl.InputAttributes.Add("class", "myCheckBoxClass")

Answer 2

I came across this issue and am attempted to solve it using control adaptors.

See here for an example of doing this to a radio button list.

I ended up with this as my RadioButtonAdaptor-

using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.Adapters;

public class RadioButtonAdapter : WebControlAdapter
{
    protected override void Render(HtmlTextWriter writer)
    {
        RadioButton targetControl = this.Control as RadioButton;

        if (targetControl == null)
        {
            base.Render(writer);

            return;
        }

        writer.WriteBeginTag("input");
        writer.WriteAttribute("type", "radio");
        writer.WriteAttribute("name", targetControl.GroupName);
        writer.WriteAttribute("id", targetControl.ClientID);            

        if (targetControl.CssClass.Length > 0)
        {
            writer.WriteAttribute("class", targetControl.CssClass);
        }      

        writer.Write(" />");

    }
}

And this added to my browsers file-

<browser refID="Default">
        <controlAdapters>            
            <adapter controlType="System.Web.UI.WebControls.RadioButton"
               adapterType="RadioButtonAdapter" />
        </controlAdapters>
</browser>

Of course, there are some downsides to this. Along with those mentioned at the above link, you also lose functionality if you do not impliment everything (the above code does not allow for a radio button to be checked). There are some CSS friendly control adaptors, but they do not cover the radio button control. It may be possible to use Reflector to get the default control adaptor as a starting point.

Answer 3

the best way i think is this:

    public class HtmlTextWriterNoSpan : HtmlTextWriter
    {
        public HtmlTextWriterNoSpan(TextWriter textWriter) : base(textWriter)
        { 
        }

        protected override bool OnTagRender(string name, HtmlTextWriterTag key)
        {
            if (name == HtmlTextWriterTag.Span)
            {
                return false;
            }

            return base.OnTagRender(name, key);
        }
    }

to use it in custom control:

    protected override void Render(HtmlTextWriter writer)
    {
        writer = new HtmlTextWriterNoSpan(writer);
        base.Render(writer);
        // HERE MORE CODE
    }

Answer 4

Found similar issue, wrote a simple jQuery based function to enable/disable checkbox and parent span

function resetChk(ctl, bEnable) { 

            if (bEnable){
                ctl.removeAttr('disabled').parent().removeAttr('disabled');
            }else{
                ctl.attr('disabled', true).parent().attr('disabled', true);
            }

        }

Answer 5

The plain RadioButton is often rendered without a span. If you set CssClass, Style, Enabled properties, the RadioButton is rendered with a span. This inconsistency is a real pain when I need to manipulate the radio button with client-side scripts. What I usually do is to apply a dummy CssClass so that it will always render a span consistently.

Answer 6

Every WebControl by default renders as a <span> tag, plus any custom rendering that the control author adds.

One of the first things you usually do when you write a custom WebControl is to override the "TagKey" property to render a div, or something besides a span. The default value of this property is HtmlTextWriterTag.Span.

You could subclass your checkbox items and override the TagKey property to render something else, but then you have to deal with making all your checkboxes into your own version.