twitter-bootstrap 在 Bootstrap 中禁用输入字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29253431/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable input fields in Bootstrap
提问by Wisher Well
I am having 3 input fields in Bootstrap, if any one of the input field is filled, I want to disable other two.
我在 Bootstrap 中有 3 个输入字段，如果输入字段中的任何一个被填充，我想禁用其他两个。
Lets say I am having A,B,C inputboxes.
If A is filled then B & C will become disabledor readonlyand vice versa.
假设我有 A、B、C输入框。
如果 A 被填充，则 B & C 将变为disabled或readonly反之亦然。
Also if I delete value from A then B & C again become enabled. As B & C was also not filled.
此外，如果我从 A 中删除值，则 B & C 再次启用。由于B＆C也没有填写。
采纳答案by Wisher Well
$("#fieldA").keyup(function() {
if ($("#fieldA").val().length > 0) {
$("#fieldB").attr('disabled', 'disabled');
$("#fieldC").attr('disabled', 'disabled');
} else {
$('#fieldB').removeAttr('disabled');
$('#fieldC').removeAttr('disabled');
}
});
$("#fieldB").keyup(function() {
if ($("#fieldB").val().length > 0) {
$("#fieldA").attr('disabled', 'disabled');
$("#fieldC").attr('disabled', 'disabled');
} else {
$('#fieldA').removeAttr('disabled');
$('#fieldC').removeAttr('disabled');
}
});
$("#fieldC").keyup(function() {
if ($("#fieldC").val().length > 0) {
$("#fieldB").attr('disabled', 'disabled');
$("#fieldA").attr('disabled', 'disabled');
} else {
$('#fieldB').removeAttr('disabled');
$('#fieldA').removeAttr('disabled');
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='fieldA' />
<input type='text' id='fieldB' />
<input type='text' id='fieldC' />回答by Sileax
You simply do a jQuery function
你只需做一个 jQuery 函数
// #your_filled_input is for the id of the input
$("#your_filled_input").keyup(function() {
if ($("#your_filled_input").val().length >= 0) {
$("#your_first_other_field" ).attr('disabled', 'disabled');
$("#your_second_other_field").attr('disabled', 'disabled');
}
});
回答by Jasper
The input fields
输入字段
<input type='text' id='a' class="inputfield" disabled="false" />
<input type='text' id='b' class="inputfield" disabled="false" />
<input type='text' id='c' class="inputfield" disabled="false" />
The jQuery code
jQuery 代码
$(document).ready(function(){
$('.inputfield').prop('disabled', false);
$('.inputfield').change(function(){
var a = $('#a').val();
var b = $('#b').val();
var c = $('#c').val();
if((a).length > 0){
$('#b').prop('disabled', true);
$('#c').prop('disabled', true);
}
if((b).length > 0){
$('#a').prop('disabled', true);
$('#c').prop('disabled', true);
}
if((c).length > 0){
$('#a').prop('disabled', true);
$('#b').prop('disabled', true);
}
});
});
});
回答by jmgross
You can use this :
你可以使用这个：
<input type="text" class="singleedit"/>
<input type="text" class="singleedit"/>
<input type="text" class="singleedit"/>
With this JS
有了这个JS
$('.singleedit').keyup(function() {
$(this).removeAttr('readonly');
$('.singleedit').not(this).each(function(){
$(this).val('').attr('readonly','readonly');
});
})
