遍历 dom，找到最近的前一个复选框

Question

我正在尝试遍历下面代码中的 dom，只是脑子有问题。我想启用之前的 .form-input-wrapper 中的复选框。

<div>
  <div class="form-input-wrapper inline-radio-buttons">
    <span class="button-label">Setup - Ready</span>
    <span>
      <input id="status_0" name="status[0]" type="hidden" value="setup_ready">           
      <input checked="checked" disabled="disabled" id="status_0" name="status[0]" type="checkbox" value="setup_ready">
    </span>
  </div>
  <div class="form-input-wrapper inline-radio-buttons">
    <span class="button-label">Setup - Required</span>
    <span>
      <input id="status_1" name="status[1]" type="hidden" value="setup_required">
      <input checked="checked" disabled="disabled" id="status_1" name="status[1]" type="checkbox" value="setup_required">
    </span>
  </div>
</div>

我已经尝试了很多东西。这就是我目前正在做的事情：

（注意：这是为了上下文）基本上我有一列复选框。如果选中它们，它们将被禁用，最后一个除外。如果你取消选中最后一个，我想启用上面的复选框。

$(@checkboxes).live 'click', ->
  if $(this).is(':checked')
    return
  else
    console.log "$(this).parents() ", $(this).parent().prev().has(':checkbox').first().find(':checkbox')
    console.log $(this)
    $(this).parent().prev().has(':checkbox').first().find(':checkbox').disabled = false
    return

如果我登录：

$(this).parent().prev().has(':checkbox').first().find(':checkbox')

这个日志只会打印出我点击的元素。

Answer 1

你试过了吗$(this).parentsuntil('elem')？

Answer 2

你需要升 2 层，但我认为最好使用 .closest() 指定选择器，而不是在代码中硬编码层数。

对于第一个，使用：

$(this).closest(".inline-radio-buttons").siblings().first().find(":checkbox").prop("disabled", false);

对于前一个，使用：

$(this).closest(".inline-radio-buttons").prev().find(":checkbox").prop("disabled", false);

Answer 3

点击后使用.removeAttr('checked')。

样本：

$('input').bind('click', function () {  
$('.inline-radio-buttons').last().find('input').removeAttr('disabled').removeAttr('checked');
});

Answer 4

我更改了以下内容以使其正常工作：

使用 closest 而不是 parent 因为它更稳定，因为你可以嵌套任意多的嵌套。
此时不要使用 first，因为 prev 将 return 1 或 0 元素。 first 没有任何改变。
向 HTML 添加了一个没有 disabled="disabled"
将.disabled = false改为.removeAttr('disabled')（我觉得.disabled = false不行）

jQuery(window).ready(function() {
  $(':checkbox').live('click', function() {
    if($(this).is(':checked'))
      return;
    $(this).closest(".form-input-wrapper").prev().has(':checkbox').find(':checkbox').removeAttr('disabled');
    return;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div>
  <div class="form-input-wrapper inline-radio-buttons">
    <span class="button-label">Setup - Ready</span>
    <span>
      <input id="status_0" name="status[0]" type="hidden" value="setup_ready">           
      <input checked="checked" disabled="disabled" id="status_0" name="status[0]" type="checkbox" value="setup_ready">
    </span>
  </div>
  <div class="form-input-wrapper inline-radio-buttons">
    <span class="button-label">Setup - Required</span>
    <span>
      <input id="status_1" name="status[1]" type="hidden" value="setup_required">
      <input checked="checked" disabled="disabled" id="status_1" name="status[1]" type="checkbox" value="setup_required">
    </span>
  </div>
  <!-- Element inserted by me to be able to test one without disabled="disabled" -->
  <div class="form-input-wrapper inline-radio-buttons">
    <span class="button-label">Setup - 3</span>
    <span>
      <input id="status_2" name="status[2]" type="hidden" value="setup_required">
      <input checked="checked" id="status_2" name="status[2]" type="checkbox" value="setup_required">
    </span>
  </div>
</div>

遍历 dom，找到最近的前一个复选框

Traversing the dom, finding the closest previous checkbox

jquery

traversal