单击或更改输入,禁用其他
clicking or changing input, disables others
$(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
它实际上并没有删除它,只是清除了值.. ?
您需要使用 .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() 状态的文档:
To retrieve and change DOM properties such as the checked, selected,
or disabled state of form elements, use the .prop() method.
我通过添加一个透明的 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;
}
$(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
它实际上并没有删除它,只是清除了值.. ?
您需要使用 .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() 状态的文档:
To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method.
我通过添加一个透明的 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;
}