禁用引导中的输入字段

问题描述：

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

可以说我有A，B，C输入框。如果A填充，则B & C将变为禁用或只读，反之亦然。

此外，如果我从A删除值，则B & C再次变为启用状态。由于B & C也未填写。

好主意，什么？你试过吗？你的标记是什么？风格？ etc ... – 2015-03-25 10:47:12

答

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

答

你只需做一个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'); 
         } 
    });

谢谢。我已经添加了这个在其他$（'＃your_first_other_field'）中启用字段。removeAttr（'disabled'）; – 2015-03-25 14:04:08

答

您可以使用此：

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

答

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

}）;

禁用引导中的输入字段

相关推荐