javascript - 如何在多个div中获取类名

Question

当第一个输入聚焦时，我试图创建其他字段不可点击，但它似乎不起作用。我做了一个插图，以便它可以理解，我的代码看起来像这样。
我可以知道我在哪里做错了吗？

$('.form-control').click(function() {
    $(this).parent('div').next().children('.form-control').prop('disabled', false);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
    <div>
        <div class="name">
            <input class="form-control" type="text" placeholder="name" />
        </div>
    </div>
    <div>
        <div class="age">
            <input class="form-control" type="text" placeholder="age" disabled="disabled" />
        </div>
        <div class="city">
            <input class="form-control" type="text" placeholder="city" disabled="disabled" />
        </div>
    </div>

    <div class="submit">
        <input class="form-control" type="submit" value="Submit" disabled="disabled" />
    </div>
</form>

Answer 1

你想要这样的东西：

$('.form-control').click(function() {
  $(this).closest('form').find('.form-control:disabled:first').prop('disabled', false);
})

$(this).parent('div')返回类似的东西<div class="name">然后 using.next()不会找到任何东西，因为它没有任何兄弟姐妹。

演示

$('.form-control').click(function() {
  $(this).closest('form').find('.form-control:disabled:first').prop('disabled', false);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <div>
    <div class="name">
      <input class="form-control" type="text" placeholder="name" />
    </div>
  </div>
  <div>
    <div class="age">
      <input class="form-control" type="text" placeholder="age" disabled="disabled" />
    </div>
    <div class="city">
      <input class="form-control" type="text" placeholder="city" disabled="disabled" />
    </div>
  </div>

  <div class="submit">
    <input class="form-control" type="submit" value="Submit" disabled="disabled" />
  </div>
</form>