Question

我有多个复选框：

<div class="abc">
  <%= check_box_tag "closed" %>
  <%= select_tag :time %>
</div>
<div class="abc">
  <%= check_box_tag "closed" %>
  <%= select_tag :time %>
</div>
<div class="abc">
  <%= check_box_tag "closed" %>
  <%= select_tag :time %>
</div>
<div class="abc">
  <%= check_box_tag "closed" %>
  <%= select_tag :time %>
</div>

它们具有相同的名称和标识#closed

当我点击复选框（比如说最后一个复选框）时，我该如何操作它会禁用最后一个select_tag？

我试过这样的事情：

$("#closed", this).change ->
  alert("test")
  $(this).closest(".abc").prop('disabled', true)

到目前为止，只有点击DOM中的第一个复选框才能生效。

由于

Answer 1

.abc是<div>。使用.next()找到<select> ...

$("#closed", this).change ->
  $(this).next("select").prop('disabled', true)

正如其他人所提到的，拥有多个具有相同id的元素是无效的HTML。考虑改变它。

Answer 2

首先，对HTML文档中的多个项目使用相同的id并不是一个好习惯。但是，如果您确定checkbox和select始终位于文档中的同一级别，则可以使用siblings来获取选择 -

$("#closed", this).change ->
  alert("test")
  $(this).siblings(".abc").prop('disabled', true)

或可能是

$("#closed", this).change ->
alert("test")
$(this).parent().find(".abc").prop('disabled', true)

jQuery：多个同名复选框字段，但使用$（this）选择器

2 个答案: