Question

我有一个HTML结构如下：

<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>

如此处所示，显示了一些li元素，其他元素具有display:none。此外，显示的那些元素也具有类名list_enabled。我只想要的是，如果显示其父li，它会动态检查第一个无线电输入（即添加已检查的属性），但仅显示第一个。

我可以使用jQuery或没有它甚至。这是我到目前为止所得到的：

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

它的作用是将第一个li元素中的输入设置为选中，无论它是否显示。

我一直在尝试各种各样的事情。可能是我错过了一些简单的事情。非常感谢任何帮助。

Answer 1

尝试以下方法：

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

来自jQuery Docs

while：first只匹配一个元素，即：first-child选择器可以匹配多个：每个父母一个。这相当于：第n个孩子（1）

http://jsfiddle.net/dwj9owwe

如果您愿意，可以参考使用.attr() vs .prop()来阅读SO问题.prop() vs .attr()中建议的原因摘要，并做出相应的决定。

如何根据其父元素将收音机列表的第一个输入设置为已选中

1 个答案: