Как получить имя класса в нескольких 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">, а затем с помощью .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>