禁用引導中的輸入字段

Question

我在Bootstrap中有3個輸入字段，如果任何一個輸入字段被填充，我想禁用其他兩個字段。

可以說我有A，B，C輸入框。 如果A填充，則B & C將變爲禁用或只讀，反之亦然。

此外，如果我從A刪除值，則B & C再次變爲啓用狀態。由於B & C也未填寫。

Answer 1

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

你只需做一個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 3

您可以使用此：

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

Answer 4

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

}）;