“Label For”, Selects and IE6

Good accessible sites use LABEL tags to describe the purpose of other controls on the page; for example a login control should have LABELs in it that tells the user which textbox is for the Username and which is for Password. To be completely groovy the LABEL should also have a FOR attribute in it that explicitly declares which control it refers to, like so:

<label for=”txtUsername”>Username</label>

<input type=”text” id=”txtUsername” />

BUT there is one problem – f*%!&ing IE6 does something very stupid when you use LABEL FOR with dropdownlist boxes (SELECTS). In IE6, if you click on the label, the SELECT resets its currently selected item and reverts to the first in the list. GOD *DAMN* IT.

Anyway, I knocked up this blob of JQuery which empties the LABEL FOR with SELECTs in IE6 and below. Hope it’s useful to someone.

<!– Script to disable Label.For attributes for SELECT elements in IE6 (otherwise they reset the selected OPTION)  –>


<!–[if lte IE 6]>

<script type=”text/javascript”>

$(’label’).each(function() {if ($(’#’ + $(this).attr(’for’)).attr(’tagName’) == ‘SELECT’) $(this).attr(’for’, ”) ;});

</script>

<![endif]–>