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

Answer 3

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

});

Answer 4

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