jQuery-next（）將不起作用，但siblings（）將起作用

Question

我正在嘗試創建一個包含具有“是/否”單選按鈕和文本區域的多個部分的表單。 頁面加載時，默認情況下禁用文本區域，並選中所有“否”單選按鈕。 我試圖獲取它，以便一旦用戶選擇“是”單選按鈕，disabled屬性就會從相關文本區域中刪除。

我正在嘗試使用next（'textarea'）進行此操作，但這似乎不起作用。 奇怪的是，兄弟姐妹確實可以工作（使用相同的選擇器），但是顯然它的對象是所有文本區域，而不僅僅是相關的文本區域。

有任何想法嗎？

這是我的代碼（簡體）：

<input type="radio" value="Yes" name="rdo" />Yes
<input type="radio" value="No" name="rdo" checked/>No
<br />
<textarea rows="4" cols="50" disabled></textarea>

$(document).ready(function(){
    $(":radio[value=Yes]").click(function(){
        if ($(this).attr('checked','true')) {
            $(this).next('textarea').removeAttr('disabled');
        }
    });
});

參見JSFiddle： http ： //jsfiddle.net/AThomas92/Ry2fX/

干杯，

灰

Answer 1

如jQuery doc所述：

。下一個（）

獲取匹配的元素集中每個元素的緊隨其后的同級。 如果提供了選擇器，則僅當與該選擇器匹配時才檢索下一個同級。

因此，下一個$(":radio[value=Yes]")輸入為no。

這里還有2個其他選項（其中1個已經說明過）：

• .nextAll()
• .siblings()

Answer 2

是的，這是顯而易見的結果，因為.next('textarea')將僅使用提供的選擇器在當前元素之后立即搜索下一個同級對象。 但是與.next()不同， .siblings()將通過提供的選擇器搜索當前元素周圍的所有兄弟姐妹，並返回匹配的兄弟姐妹。

Answer 3

您需要包裝輸入，以便可以使用

<div class="wrapper">
   <input type="radio" value="Yes" name="rdo" />Yes
   <input type="radio" value="No" name="rdo" checked/>No
   <br />
   <textarea rows="4" cols="50" disabled></textarea>
</div>
$(document).ready(function(){
    $(":radio[value=Yes]").click(function(){
        if ($(this).attr('checked','true')) {
            $('textarea', $(this).parent()).removeAttr('disabled');
        }
    });
});