Question

我有这样的复选框：

public static void main(String[] args) {
        Scanner user_input = new Scanner(System.in);
        int number;
        System.out.println("Consider the following equation: 5x - 10");
        System.out.println("Solve for x.");
        number = user_input.nextInt();

        if (number == 2) {
            System.out.println("Correct.");

        } else {
            System.out.println("Incorrect. The answer is 2.");
        }
    }

并对此起作用：

<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);
    }
}

Jquery不希望找到父母/最近的功能来自＆＃34;这个＆＃34; - 复选框点。视觉工作室中的上下文是不确定的。

即使这不起作用：

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

Jquery有效，因为我检查了这个并且工作了：

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

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

Answer 1

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

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

然后在函数中我们只使用event.currentTarget

的属性

＆＃13;

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);
  }
}

＆＃13;

<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>

＆＃13;

jQuery Way

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

＆＃13;

$(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);
  }
})

＆＃13;

<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>

＆＃13;

Answer 2

您需要将<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <section id="main-section"> <div class="dark-overlay"> <div class="team-inner"> <div class="container"> <div class="row"> <div class="col-6"> <form class="" name="calcGravAcceleration"> <div class="form-group b"> <label for="inputAngVelocity1">Angular Velocity</label> <input type="number" class="form-control" id="inputAngVelocity1" placeholder="Angular Velocity (radians per second)"> </div> <div class="form-group"> <label for="inputRadius1">Radius</label> <input type="number" class="form-control" id="inputRadius1" placeholder="Radius of the spinning circle"> </div> <div class="form-group"> <label>Gravitational Acceleration</label> <input class="form-control" id="gravAccelResult" type="text" placeholder="Readonly input here…" readonly> </div> <button onclick="calcGravAccel()" class="btn btn-primary">Calculate Gravitational Acceleration</button> </form> </div> <div class="col-6"> </div> </div> </div> </div> </div> </section> <script> function calcGravAccel(){ var angVel = document.getElementById("inputAngVelocity1").value; var radius = document.getElementById("inputRadius1").value; var squaredAngVel = Math.pow(angVel, 2); var gravityAccel = squaredAngVel*radius; var result = document.getElementById("gravAccelResult"); result.value="" + gravityAccel; } </script>发送到this回调：

onchange

然后<input class="checkField" onchange="freezeChildren(this)" type="checkbox" id ="tra"/>需要进行一些调整：

freezeChildren

这是一个有效的JSBin：

在Jquery中使用最接近$（this）函数的parents（）

2 个答案:

jQuery Way