在 Bootstrap 中禁用输入字段

Question

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

假设我有 A、B、C输入框。
如果 A 被填充，则 B & C 将变为disabled或readonly反之亦然。

此外，如果我从 A 中删除值，则 B & C 再次启用。由于B＆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

$("#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' />