单击或更改输入，禁用其他答案

【问题标题】：clicking or changing input, disables others单击或更改输入，禁用其他
【发布时间】：2015-12-18 13:51:39
【问题描述】：

$(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 它实际上并没有删除它，只是清除了值.. ?

【问题讨论】：

您的问题应该包括预期的行为。

标签： jquery events input disabled-input

【解决方案1】：

您需要使用.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 属性，例如选中、选中、或 disabled 状态的表单元素，使用 .prop() 方法。

【讨论】：

【解决方案2】：

我通过添加一个透明的 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;
}

【讨论】：