jQuery change Radio Button value..weird one

Question

I have this weird problem, may be i am overlooking something but this is making me crazy. In my application i don't want user to select more than 30 items so after 30 if user clicks further radio button i don't want him to do so.

Problem is if i get the name of radio button by jquery and then set the value of that radio button , it doesn't work but if i hardcode the same name then it does work

Here is the Jsfiddle example. http://jsfiddle.net/s7GeZ/2/

HTML:

<span class="radiobut4" >
  Ignore <input type="radio" value="ignore" name="art_52643" id="52643" >
  Visible <input type="radio" value="visible" name="art_52643" id="52643" >
  Invisible <input type="radio" value="invisible" name="art_52643" id="52643">
</span>

Java Script:

$('input:radio').live("change",function (event){
var radioName = $(this).attr("name");
    alert(radioName);
    $("input:radio[name='+radioName+'][value ='ignore']").prop('checked', true);
   // $("input:radio[name='art_52643'][value ='ignore']").prop('checked', true);

});

Just comment/uncomment last two lines to see the problem.

Any kind of help would be appreciated.

Answer 1

Mismatched quotes, change :

$("input:radio[name='+radioName+'][value ='ignore']").prop('checked', true);

to

$("input:radio[name='"+radioName+"'][value ='ignore']").prop('checked', true);

To concatenate the variable into the selector.
Also note that radios with the same name is a group, and only one can be checked at a time, radios with the same ID is just invalid markup.

Answer 2

You need to specify the name of the radio, you are selecting the radio with the name "+radioName+" which is not what you want. Try this:

$("input:radio[name='"+radioName+"'][value ='ignore']").prop('checked', true);