jquery - find 'label' element by 'for' attribute and reset 'for' attribute to new value

Question

I've searched and have found the following to fetch the label.

var label = $("label").attr("for", id);

my initial attempt was to try a variant:

$('label[for|="'+oldId+'"]').attr('for',newId);

where oldId is the current value and newId is the new value. I don't get an error, but nothing gets changed.

I also tried just fetching the id of the label so I could find the element by id and change the attribute value, but when I try:

var label = $("label").attr("for", oldId);
var id = label.id;

I get id as undefined.

So, basically I want to: - find a label element by it's for attribute. - reset the for attribute to a new value.

Answer 1

The requirement seems a bit odd, but:

So, basically I want to:

• find a label element by it's for attribute

var theLabel = $('label[for="' + theValueYouWantToFind + '"]');

• reset the for attribute to a new value

theLabel.attr("for", theNewValueYouWantItToHave);

This will associate the label with a different element than it was originally associated with (the one with id matching theNewValueYouWantItToHave ).

Live Example This starts out with "click me" connected to the checkbox to the left of it. If you click "switch" it connects it to the checkbox on the right instead:

 var currentId = $("label").first().attr("for"); $("input[value=Switch]").on("click", function() { var newId = currentId === "left" ? "right" : "left"; var label = $('label[for="' + currentId + '"]'); label.attr("for", newId); currentId = newId; }); 

 <div> <input type="checkbox" id="left"> <label for="left">Click me</label> <input type="checkbox" id="right"> </div> <input type="button" value="Switch"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

Answer 2

You can try as below:

DEMO HERE

var oldId="#myId";
$('label[for="'+oldId+'"]').attr('for',"#newId");

Now the explanations:

var label = $("label").attr("for", id);

Here you are trying to assign id value to the variable and at the same time you are trying to change it

$('label[for|="'+oldId+'"]').attr('for',newId);

This line you have a syntax error after for you have added | instead of ]

var label = $("label").attr("for", oldId);
var id = label.id;

Again the same problem - assignment and change which does not do anything and label will not have any value thus giving you undefined error

Answer 3

Documentation for JQuery's attr

Before you go much further, why are you wanting to change the "for" attribute and is it going to be processed again after you change it?

attr with one parameter returns the value of the attribute ie: attr("for") . attr with two parameters sets the value of the attribute id: attr("for", newValue) .

$("label").attr("for", id);

sets the attribute "for" to the value of id.

$('label[for|="'+oldId+'"]').attr('for',newId);

Jquery selector test site confirms that your selector is good. From what I'm seeing this is correct as long as oldId is the value you are looking for, the attribute should change to newId.

var label = $("label").attr("for", oldId);
var id = label.id;

This will find all "label" and set their attribute of "for" to oldId. the setting attr is returning jquery, but without researching it, I would be surprised if it was returning the label rather than the contents of the attribute it is setting to "oldId", so this will most likely not do what you want.