Нажав или изменив ввод, отключает другие

Question

$(function() {
    $('.disablesothers').on('change focus click', function () {
   var $input = $(this).find('input');
   var $brothers = $input.parent().siblings('.disablesothers');
   console.log($brothers.length);
      $input.removeAttr('disabled');
   $brothers.find('input').attr('disabled', 'disabled');
    });
});

input:disabled {
   border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="overlabel tab_content default tooltip disablesothers" title="Bind text">
  <span>Destination name, zone</span>
  <input type="text" name="hotel_name">
</label>
<label class="overlabel disablesothers">
  <input type="text" name="other_hotels" id="other_hotels">
</label>

Обратите внимание, что я связываю событие на метке, а не на входах,

Но это не работает

Есть идеи почему?

-РЕДАКТИРОВАТЬ-

Это может быть потому, что removeAttr это на самом деле не удаляет его, просто очищает значение..?

Answer 1

Я решил добавить прозрачный div, который покрывает метку, когда ввод отключен, потому что некоторые браузеры не будут запускать событие, если это отключенный ввод,

<label class="overlabel disablesothers">
  <input type="text" name="other_hotels" id="other_hotels">
</label>

затем,

:checked + div {
    display: inline-block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

Answer 2

Вам нужно использовать .prop('disabled', true) вместо .attr('disabled', 'disabled'):

$(function() {
    $('.disablesothers').on('change focus click', function () {
   var $input = $(this).find('input');
   var $brothers = $input.parent().siblings('.disablesothers');
   console.log($brothers.length);
      $input.removeAttr('disabled');
   $brothers.find('input').prop('disabled', true);
    });
});

input:disabled {
   border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="overlabel tab_content default tooltip disablesothers" title="Bind text">
  <span>Destination name, zone</span>
  <input type="text" name="hotel_name">
</label>
<label class="overlabel disablesothers">
  <input type="text" name="other_hotels" id="other_hotels">
</label>

Как документы для .attr() утверждают:

Чтобы получить и изменить свойства DOM, такие как проверенное, выбранное или отключенное состояние элементов формы, используйте метод.prop().