Disable input fields in Bootstrap

Question

I am having 3 input fields in Bootstrap, if any one of the input field is filled, I want to disable other two.

Lets say I am having A,B,C input boxes.
If A is filled then B & C will become disabled or readonly and vice versa.

Also if I delete value from A then B & C again become enabled. As B & C was also not filled.

Answer 1

You simply do a jQuery function

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