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

你需要上升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 2

我更改了以下内容以使其发挥作用：

使用closest代替parent，因为它更稳定，因为您可以根据需要进行嵌套。
此时不要使用first，因为prev会返回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>

Answer 3

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

Answer 4

如果点击，请使用.removeAttr('checked')。

示例：

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

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

4 个答案: