Question

当我的无线电字段值为NO时，我正在尝试向最近的require添加textarea属性，我知道您可以专门针对此但我的核对清单有15个项目但我不知道想重复每个功能。

我的代码如下，我可以获取值，但不会添加任何最接近textarea的必需属性。

我的HTML

<tr>
    <td width="10">1</td>
    <td width="650">Does the stencil follow the standard size?</td>
    <td width="10"><label><input type="radio" name="q1" value="YES" required></label></td>
    <td width="10"><label><input type="radio" name="q1" value="NO" class="noq"></label></td>
    <td width="10"><label><input type="radio" name="q1" value="N/A"></label></td>
    <td><textarea rows='1' class='autoExpand' name="remarks_q1"></textarea></td>
</tr>

我的jQuery

$('.noq').on('click', function(e) {
    if(e.currentTarget.value == 'NO'){
        $(this).parent().closest('.autoExpand').prop('required',true);
    }else{
        $(this).parent().closest('.autoExpand').prop('required',false);
    }

    console.log(e.currentTarget.value);
});

我的控制台日志给出了正确的值，我也尝试了prop但没有运气，任何建议都会很棒！提前致谢！

Answer 1

JQuery最接近的方法搜索DOM树，因此您无法在此处使用它来查找文本区域。

尝试类似下面的内容，它将搜索DOM树以查找最近的tr，然后沿着DOM树查找您的textarea。

$(this).closest('tr').find('.autoExpand').prop('required',true);

Answer 2

我添加了一个required类来了解更改，还添加了.noq类到单选按钮，因为缺少了。并删除else条件，因为可以避免。您应该使用parent()来获取最近的closes()，而非使用tr：

＆＃13;

$('.noq').on('click', function(e) {
  $(this).closest('tr').find('.autoExpand').prop('required', false).removeClass('required');
  if (e.currentTarget.value == 'NO') {
    $(this).closest('tr').find('.autoExpand').prop('required', true).addClass('required');
  }
});

＆＃13;

.required {
  border: 1px solid #d00;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td width="10">1</td>
      <td width="650">Does the stencil follow the standard size?</td>
      <td width="10"><label><input type="radio" name="q1" value="YES" class="noq" required></label></td>
      <td width="10"><label><input type="radio" name="q1" value="NO" class="noq"></label></td>
      <td width="10"><label><input type="radio" name="q1" class="noq" value="N/A"></label></td>
      <td><textarea rows='1' class='autoExpand' name="remarks_q1"></textarea></td>
    </tr>
  </tbody>
</table>

＆＃13;

Jquery在最近的元素类上添加必需的属性

2 个答案: