How to set first input of a radio list as checked, based on its parent element

Question

I have an HTML structure as below:

<ul>
    <li id="time_option-1" class="" style="display: none;">
        <input type="radio" name="octime[]" id="OrderOrderCollectiondateTime0" value="1" disabled="disabled">
        <label for="OrderOrderCollectiondateTime0" style="display: none;">8:00 AM - 9:00 AM</label>
    </li>
    <li id="time_option-2" class="list_enabled" style="display: block;">
        <input type="radio" name="octime[]" id="OrderOrderCollectiondateTime1" value="2">
        <label for="OrderOrderCollectiondateTime1" style="display: block;">9:00 AM - 10:00 AM</label>
    </li>
    <li id="time_option-3" class="" style="display: none;">
        <input type="radio" name="octime[]" id="OrderOrderCollectiondateTime2" value="3" disabled="disabled">
        <label for="OrderOrderCollectiondateTime2" style="display: none;">10:00 AM - 11:00 AM</label>
    </li>
    <li id="time_option-4" class="" style="display: none;">
        <input type="radio" name="octime[]" id="OrderOrderCollectiondateTime3" value="4" disabled="disabled">
        <label for="OrderOrderCollectiondateTime3" style="display: none;">11:00 AM - 12:00 PM</label>
    </li>
    <li id="time_option-5" class="list_enabled" style="display: block;">
        <input type="radio" name="octime[]" id="OrderOrderCollectiondateTime4" value="5">
        <label for="OrderOrderCollectiondateTime4" style="display: block;">12:00 PM - 1:00 PM</label>
    </li>
    <li id="time_option-6" class="list_enabled" style="display: block;">
        <input type="radio" name="octime[]" id="OrderOrderCollectiondateTime5" value="6">
        <label for="OrderOrderCollectiondateTime5" style="display: block;">1:00 PM - 2:00 PM</label>
    </li>
</ul>

As seen here some li elements are shown and others have a display:none. Also, those elements, which are displayed, also have a class name list_enabled. What I just want is that it dynamically checks first radio input (i.e. adds checked attribute) to the input, if its parent li is shown, but for first one only.

I am fine with using jQuery or without that even. Here is what I got so far:

$('ul li.list_enabled:first-child input').attr('checked', 'checked');

What it does is that it sets the input in the first li element as checked, regardless of whether it is displayed or not.

I have been trying various things for hours. May be I am missing some simple thing. Any help is greatly appreciated.

look at using **[:visible selector](http://api.jquery.com/visible-selector/)** — charlietfl, Nov 03 '14 at 11:44

score 1 · Accepted Answer · edited May 23 '17 at 12:21

try the following:

$('.list_enabled:first input').attr('checked', 'checked');

From the jQuery Docs

While :first matches only a single element, the :first-child selector can match more than one: one for each parent. This is equivalent to :nth-child(1).

http://jsfiddle.net/dwj9owwe

In reference to using .attr() vs .prop() if you like you can read a summary of why that is recommended in the SO question .prop() vs .attr() and make your decision accordingly.

How to set first input of a radio list as checked, based on its parent element

1 Answers1