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 bee disabled or readonly and vice versa.

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

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 bee disabled or readonly and vice versa.

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

• javascript
• html
• twitter-bootstrap

• 2 Nice idea, and what did you tried? whats your markup? styles? etc... – Mr. Alien Commented Mar 25, 2015 at 10:47

4 Answers 4

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

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

JSFIDDLE

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

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

});

You can use this :

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

With this JS

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