Question

我在Bootstrap中有3个输入字段，如果填写了任何一个输入字段，我想禁用其他两个。

假设我有A，B，C 输入框如果A被填满，那么B＆amp; C将变为disabled或readonly，反之亦然。

此外，如果我删除A中的值，那么B＆amp; C再次启用。作为B＆amp; C也没有填补。

Answer 1

你只是做一个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');
                        }
    });

Answer 2

JSFIDDLE

输入字段

<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" />

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);
    }
});

}）;

Answer 3

＆＃13;

$("#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');
  }
});

＆＃13;

<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' />

＆＃13;

Answer 4

您可以使用：

<input type="text" class="singleedit"/>
<input type="text" class="singleedit"/>
<input type="text" class="singleedit"/>

有了这个JS

$('.singleedit').keyup(function() {
  $(this).removeAttr('readonly');
  $('.singleedit').not(this).each(function(){
    $(this).val('').attr('readonly','readonly');
  });
})

禁用Bootstrap中的输入字段

4 个答案: