Check first radio button with JQuery

Question

I would like to check the first radio button of each group. But there are some radio button that are disabled, so the script should ignore them and go to next non-disabled button.

I wrote something like this but it doesn't work:

$(document).ready(function(){
if ($("input['radio']).is(':disabled'))
    {  
        $(this).attr('checked', false );
    }
else
    {
        $(this).attr('checked', true );
    }
});

Thanks a lot

Ruhr

Or, @Haim, input:radio. – Ulyssesumayyad

Answer 1

If your buttons are grouped by their name attribute, try:

$("input:radio[name=groupName][disabled=false]:first").attr('checked', true);

If they are grouped by a parent container, then:

$("#parentId input:radio[disabled=false]:first").attr('checked', true);

Blenny

If you want the change event to fire, do .click() instead – Loaning

It works. But I also need to trigger the change event once setting true. – Davis

I tried '.click()' as by @Yarin, but not worked. But I got it. To trigger 'change' event once setting true, $("input:radio[name=groupName]).trigger("change"); works perfectly. – Davis

Answer 2

$("input:radio[name=groupX]:not(:disabled):first")

This should give you the first non-disabled radio-button from a group...

Nightfall

Answer 3

The below does what you want:

$(document).ready(
  function(){
    $('input:radio:first-child').attr('checked',true);
  }
  );

Demo at: JS Bin.

Ulyssesumayyad

Although, to be fair, both @Šime and @rahul provide for sensible sanity-checks. – Ulyssesumayyad

$('input:radio:first-child') selects the first radio button from any radio group in your page. – Silurid

Answer 4

I tested the first answer and it doesn't resolve it. I had to use the following sentence:

jQuery("input:radio[name=groupName]:visible")[0].checked=true;

This check the first visible radio button with name = groupName

Solferino

Answer 5

<input type="radio" name="r1"><br>
<input type="radio" name="r1"><br>
<hr>
<input type="radio" name="r2"><br>
<input type="radio" name="r2"><br>
<input type="radio" name="r2"><br>

<script>
$(function(){
    //removed duplicates form the following array
    $(jQuery.unique(
        //create an array with the names of the groups
        $('INPUT:radio')
            .map(function(i,e){
                return $(e).attr('name') }
            ).get()
    ))
    //interate the array (array with unique names of groups)
    .each(function(i,e){
        //make the first radio-button of each group checked
        $('INPUT:radio[name="'+e+'"]:visible:first')
            .attr('checked','checked');
    });
});
</script>

jsfiddle = http://jsfiddle.net/v4auT/

Neutralize

Answer 6

A little upgrade for 2020. The official documentation suggests the use of "first()" and "prop()"

$("input[name='groupName'][disabled=false]").first().prop("checked", true);

Queenhood

Very important answer - don't use attr use prop instead when using jQuery 3. – Wuhan

Answer 7

Try this :

 $("input:radio:not(:disabled)").attr("checked", true);

To check the first radio button only in a group you can

 $("parentelement input:radio:not(:disabled):first-child").attr("checked", true);

Hodeida

I believe the OP meant "group" as in "all radio buttons that share the same name attribute" – Wardieu

Answer 8

This makes the first radio checked by default

jQuery("input:radio[name=groupName]").first().click()

Twocycle

Answer 9

If you've the class and you don't bother about disabled items, just do this

$(".className").first().click();

Or simply

$(".className").first().prop("checked", true);

Dorolisa

Use .click(); to make sure that the selected dot is also visible otherwise prop('checked',true) will not shift the dot – Unaccountable

Answer 10

$('.choose_site input:radio').attr('checked',false); //Unchecked All
$('.choose_site input:radio').first().prop("checked", true); // Checked First

Francinafrancine