Question

我有一个script，只要选择了是单选按钮，它就会显示一个文本区域。我想修改jquery脚本，以便textarea可以在不同的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>

我该怎么做？或者有更好的方法吗？

编辑：

    $(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>添加了属性＆＃34;触发＆＃34;。按名称确定它的触发元素。例如，<textarea data-trigger="choice2">表示<input name="choice2"/>改变了它的目标（灰色/不亮）。

通过这种方式，您可以在页面内的任何位置添加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');
        }
    });
});

使用.parent选择div

4 个答案: