javascript - 使用parents()，与Jquery中的$(this)函数最接近

Question

我有这样的复选框:

<input class="checkField" onchange="freezeChildren()" type="checkbox" id ="tra"/>

及其功能:

function freezeChildren() {
    if (this !== null && $(this).is(":checked")) {
        var parent = $(this).closest("ul");
        var children = parent.find("input[type=checkbox]");
        children.prop("checked", false);
        children.prop("disabled", true);
    }
}

当我调试时，问题出在这部分:

$(this).closest("ul");

Jquery 不想从“this”-复选框点查找父级/最近的函数。 Visual Studio 中的上下文未定义。

即使这样也不起作用:

$(this).parents('html');

Jquery 可以工作，因为我检查了这个并工作了:

$.find('html') or $.find('#tra').

我在 IE11 上工作。有人可以帮忙吗？

Answer 1

您想要做的是将事件传递给函数，然后使用 event.currentTarget 获取受影响的项目。

如您所见，onchange="freezeChildren()" 变为 onchange="freezeChildren(event)"

然后在函数中我们只需通过 event.currentTarget 来利用该属性

function freezeChildren(event) {
  let target = event.currentTarget
  if (target !== null && $(target).is(":checked")) {
    var parent = $(target).closest("ul");
    var children = parent.find("input[type=checkbox]");
    children.prop("checked", false);
    children.prop("disabled", true);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <input class="checkField" onchange="freezeChildren(event)" type="checkbox" id="tra" />
  </li>
</ul>

<小时/>

jQuery 方式

你应该做的是从html中删除代码并使用所有jquery

$(document).on('change', '.checkField', function(){
  let target = $(this)
  if (target.is(":checked")) {
    var parent = target.closest("ul");
    var children = parent.find("input[type=checkbox]");
    children.prop("checked", false);
    children.prop("disabled", true);
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <input class="checkField" type="checkbox" id="tra" />
  </li>
</ul>