Использование .parent для выбора divs

Question

У меня есть script, который выделяет текстовую область при выборе переключателя да. Я хотел бы изменить сценарий jquery, чтобы текстовая область могла находиться в другом div и по-прежнему быть отключена, как и раньше.

Просматривая документы jquery, мне кажется, что я могу сделать это с использованием .parent, но у меня возникли проблемы с его работой.

<div class="group"> 
    <input type="radio" name="choice2" value="yes" />Yes 
    <input type="radio" name="choice2" value="no" />No 
</div> 

<div class="group"> 
    <textarea rows="4" cols="20"></textarea> 
</div> 

Как это сделать? Или есть лучший способ?

Edit:

$(function() { 

    var $choices = $(".group").find(":radio"); 
    $choices.on("change", function() { 
     var $this = $(this); 
     var tarea = $this.closest(".group").next(".group").find("textarea"); 
     if ($this.val() === "yes") { 
      tarea.val(''); 
      tarea.prop('readonly', true); 
      tarea.css('background-color', '#EBEBE4'); 
     } else { 
      tarea.prop('readonly', false); 
      tarea.css('background-color', '#FFFFFF'); 
     } 
    }); 
}); 

Answer 1

Добавлен к каждому <textarea> атрибут «триггер». Определяет его триггерный элемент по имени. Например <textarea data-trigger="choice2"> означает <input name="choice2"/> change's it's stare (серый/или нет).

Таким образом вы можете добавить свои элементы textarea в любом месте своей страницы без забот.

Вот пример: http://jsfiddle.net/r0gw8t1b/2/

Answer 2

var tarea = $this.closest(".group").next(".group").find("textarea"); 

Вы можете использовать next() для достижения этой цели. Он находит родителя group, а затем смотрит на ближайшего родственника и ищет textarea.

<div class="group"> 
    <input type="radio" name="choice1" value="yes" />Yes 
    <input type="radio" name="choice1" value="no" />No 
</div> 
<div class="group"> 
     <textarea rows="4" cols="20"></textarea> 
</div> 

DEMO

Answer 3

This jsFiddle показывает, как это можно сделать.

$($(this).parent().siblings('div.group')[0]).find('textarea'); 

Найти текстовую область внутри родителей братьев и сестер типа div.group, а затем вы можете установить CSS или в зависимости от того атрибуты, которые вы хотите установить, как показано на jsFiddle.

Answer 4

Ниже код работает хорошо для выбора и отключив нужные области текста:

HTML:

<div class="group"> 
    <input type="radio" name="choice2" value="yes" />Yes 
    <input type="radio" name="choice2" value="no" />No 
</div> 

<div class="group"> 
    <textarea rows="4" cols="20"></textarea> 
</div> 

Jquery:

$(function() {  
    $("input[type='radio']").click(function() { 
     if ($(this).val()=='yes') { 
      $('.group textarea').attr('readonly',true); 
      $('.group textarea').css('background-color', '#f1f1f1'); 
     } else { 
      $('.group textarea').attr('readonly',false); 
      $('.group textarea').css('background-color', '#fff'); 
     } 
    }); 
});