Jquery set attribute for a label

Question

Is it possible to set "for"(AssociatedControlID) attribute using jQuery? I am trying something like this to set it to the very next control that appears after label:

$('label.asssociateClass').each(function()
{

      var toAssociate = $(this).next(':input');

      $(this).attr("for", toAssociate.attr("id"));

});

The problem is that if I don't set it on a server through AssociatedControlID it never gets here since it's rendered as span instead of label in that case. Is there a way to overcome this or I have to do it on a server?

Answer 1

you can't change behavior of asp:label, however you can change tag using jquery

$(function () {
    var spans = $('span.label').each(function() {
        input = $(this).next('input');      
        $('<label />').html($(this).html()).attr('for', input.attr('id')).insertBefore(input);
        $(this).remove();
    });
});

Answer 2

You can replace your spans with labels using .replaceWith() like this:

$('span.asssociateClass').each(function() {
  var l = $("<label class='associateClass' />")
           .html($(this).html())
           .attr('for', $(this).next(":input").attr("id"));
  $(this).replaceWith(l);
});​

Here's a quick example of it working: http://jsfiddle.net/V73WL/