Question

我有一个动态表单，可以添加新行，删除行。这是代码：

// HTML
<div class="row">
  <div class="col-xs-4">
    <ul>
      <li><input type="checkbox"></li>
      <li><input class="landmark" type="checkbox" value="4" name="patient[block_procedure_part2_notes_attributes][0][monitoring_device_ids][]" id="patient_block_procedure_part2_notes_attributes_0_monitoring_device_ids_4" /></li>
      <li><input type="checkbox"></li>
      <li><input type="checkbox"></li>
    </ul>
  </div>
  <div class="col-xs-8">
    <ul>
      <li><input type="checkbox"></li>
      <li><input class="us_image" type="radio" value="clear" checked="checked" name="patient[block_procedure_part2_notes_attributes][0][us_image]" id="patient_block_procedure_part2_notes_attributes_0_us_image_clear" /></li>
      <li><input class="us_image" type="radio" value="clear" checked="checked" name="patient[block_procedure_part2_notes_attributes][0][us_image]" id="patient_block_procedure_part2_notes_attributes_0_us_image_poor" /></li>
      <li><input type="checkbox"></li>
    </ul>
  </div>
</div>
<div class="row">
  <div class="col-xs-4">
    <ul>
      <li><input type="checkbox"></li>
      <li><input class="landmark" type="checkbox" value="4" name="patient[block_procedure_part2_notes_attributes][1][monitoring_device_ids][]" id="patient_block_procedure_part2_notes_attributes_1_monitoring_device_ids_4" /></li>
      <li><input type="checkbox"></li>
      <li><input type="checkbox"></li>
    </ul>
  </div>
  <div class="col-xs-8">
    <ul>
      <li><input type="checkbox"></li>
      <li><input class="us_image" type="radio" value="clear" checked="checked" name="patient[block_procedure_part2_notes_attributes][1][us_image]" id="patient_block_procedure_part2_notes_attributes_1_us_image_clear" /></li>
      <li><input class="us_image" type="radio" value="clear" checked="checked" name="patient[block_procedure_part2_notes_attributes][1][us_image]" id="patient_block_procedure_part2_notes_attributes_1_us_image_poor" /></li>
      <li><input type="checkbox"></li>
    </ul>
  </div>
</div>

// Javascript
var landmark = $('input.landmark');

landmark.change(function(event) {
  var usImageOptions = $(event.target).closest('input.us_image');
  if (landmark.prop('checked')) {
    resetInputs(usImageOptions);
    controlFormSub();
    disableInputs(usImageOptions, true);
  } else {
    disableInputs(usImageOptions, false);
  }
});

您可以看到有2 .row个。可以使用添加按钮添加更多行，或使用删除按钮删除。

这里我尝试禁用usImageOptions单选按钮，对应于最近检查的.landmark。如果选中.landmark中的.row，则应清除并禁用第一个.row的{{1}} .usImageOptions。第二个.row应该完整无缺。

我不愿意找到其他类，因为如果他们改变了，那么这段代码就会破坏。

我尝试过多种方法在同一行中选择.usImageOptions但不能。我该怎么办？

Answer 1

结束使用：

var usImageOptions = $(event.target).closest('.row').find('.us_image');

这将首先检测点击的元素，然后查找最接近的.row（尽管有很多，但它只会选择上面最近的元素），然后查找找到的.us_image { {1}}。

Answer 2

如果你正在使用jQuery，你可以抓住.row父母，然后从那里选择你的单选按钮：

$('.landmark').on('change', function(e){
    $(this).parents('.row').find('.us_image').prop('disabled', true);
});

编辑：由于您要添加更多行，因此您可能需要使用事件委派，以便捕获已添加的任何行。

$(document.body).on('change', '.landmark', function(e){
    $(this).parents('.row').find('.us_image').prop('disabled', true);
});

根据Javascript中的anoter clicked元素向下查找最近的元素

2 个答案: