Building Checkbox Elements in IE

Why oh why does everything always need to be awkward in IE? Just when you are happily developing in Chrome and/or Firefox and everything is working perfectly you find out that some little bit of javascript or CSS is not working for Internet Explorer. Today we encountered another one of those. This one has to do with dynamically building input elements for a form.

What were trying to do is actually nothing fancy. We just build a few input elements with jQuery and add those to our form:

$(function () {
  $('<input />')
    .attr('value', 'true')
    .attr('name', 'form.IsDefault')
    .attr('type', 'checkbox')
    .appendTo('#testForm');

  $('<input />')
    .attr('name', 'form.Description')
    .attr('type', 'text')
    .appendTo('#testForm');

  $('<input />').
    .attr('type', 'submit')
    .appendTo('#testForm');
});

When we submit the test form, it is send to an action method on our test controller. The method declaration looks like this:

[HttpPost]
public ActionResult Index(TestForm form)
{
    ...
}

The TestForm class is just a representation of our HTML form. It is nothing special:

public class TestForm
{
    public string Description { get; set; }
    public bool IsDefault { get; set; }
}

Everything works beautifully in Chrome and Firefox; when the checkbox is checked and the form is submitted, we can confirm that the value of the IsDefault property on the form parameter is set to true. However, when you run this in IE (confirmed in 8 and 9) the value of the IsDefault property will always be false whether the checkbox is checked or not.

After a few minutes of head scratching and trying some things out, we found out that in the case of IE, the order in which you construct your input attributes (for checkboxes at least) is important.

That means that in IE this does not work as expected:

$('<input />').attr('value', 'true').attr('type', 'checkbox');

But the next bit of code does produce the expected result; note that the order in which the “value” and “type” attributes are set is reversed:

$('<input />').attr('type', 'checkbox').attr('value', 'true');

Also, it doesn’t matter whether you use attr('value', 'true') or val(true). The only thing that is important is that you set the type before the value otherwise you also might end up wondering why your booleans never end up respecting the checkbox state.

Now, I’m not really sure why I am involving jQuery in this because the behavior has nothing to do with jQuery at all. You can easily test it out with the following snippet of code (I’m using a container element here because Firefox doesn’t do outerHTML anymore):

var input = document.createElement('input');
input.setAttribute('value', 'true');
input.setAttribute('type', 'checkbox');

var container = document.createElement('div');
container.appendChild(input);

alert(container.innerHTML);

On my system, both Chrome and Firefox alert <input value="true" type="checkbox" /> but unfortunately IE does not comply and alerts <INPUT type=checkbox>. Apart from the fact that the HTML looks hideous with the unnecessary capitals and lack of double quotes it looks like setting the type attribute in IE may cause the nasty side effect of resetting the “value” attribute back to its default value (which is “on” and is generally useless for everything). And who knows what other attributes get reset by just setting the “type” to a different value?