Question

我有两个文本输入字段，如下所示：

<input type="text" id="test1".../>
<input type="text" id="test2".../>

现在我希望访问者只能填写其中一个文本输入。例如，如果#test1有值，当访问者尝试将值输入#test2时，框中的警告应该显示“填写test1或test2但不能同时填写”。

Answer 1

如果你有多个text。使用课程。而且下面的代码也不会禁用，但不会让它集中在它上面。如果您想要禁用，请使用以下代码

$('.text').keyup(
    function (){
        if($(this).val() != '')
        {                
            $('.text').not($(this)).attr('disabled', 'disabled');
        }        
        else{
            $('.text').not($(this)).removeAttr('disabled');
        }
    }
)

像 THIS 之类的东西。

$('.text').focus(
    function (){
        if($('.text').not($(this)).val() != '')
        {
            alert("Please Enter only one value");
            $('.text').not($(this)).focus();
        }        
    }
)

和HTML

<input id="test1" type="text" class="text"/>
<input id="test2" type="text" class="text"/>

Answer 2

如果我理解正确，这就是你需要的。

$('#test1, #test2').keyup(function() {
    var $id = this.id;    
    if ($id == 'test1' && $('#test2').val().length) {
        alert('test2 already have a value');
        $('#test1').val('');
    } else if ($id == 'test2' && $('#test1').val().length) {
        alert('test1 already have a value');
        $('#test2').val('');
    }
})

检查http://jsfiddle.net/4dqUx/3/

处的工作示例

Answer 3

HTML

Test1<input id="test1" type="text"/><br/><br/>
Test2<input id="test2" type="text"/>

CSS

input{
border:1px solid black;
margin-left:20px;
}

jquery的

$('#test1').keyup(function() {
if ($('#test2').val().length > 0) {
    alert('test2 already has a value');
    $(this).val('');
    $("#test1").attr("disabled", "disabled"); 
}
})
$('#test2').keyup(function(){
if ($('#test1').val().length > 0) {
    alert('test1 already has a value');
    $(this).val('');
    $("#test2").attr("disabled", "disabled"); 
}
});

您还可以在jsfiddle.net上看到它。它提供警报并禁用复选框。

Answer 4

<input id=test1" class="test" type="text"...../>
<input id="test2" class="test" type="text"...>



$(".test").focus(function() {
 var isTextEntered=false;
 var current = $(this);
 $(".test").each( function() {

     if ($(this).attr("id") !=current.attr("id") &&  $(this).val() != "")
             isTextEntered= true;

  });

 if (isTextEntered)
    alert("text already entered in other item")

});

Answer 5

您可以使用此类解决方案：

1）在您的输入中添加data-group和data-msg属性，例如：

<input type='text' data-group='group1' data-msg='Only field1'>
<input type='text' data-group='group1' data-msg='Only field2'>
<input type='text' data-group='group1' data-msg='Only field3'>
<input type='text' data-group='group1' data-msg='Only field4'>

此属性将用于检测唯一字段组并在某些信息div中显示相关消息：

<div id='message' data-defmsg='Fill one of this fields'></div>

2）使用一些JavaScript：

$(function() {
    // Let's find message DIV and...
    var $message = $('#message');
    // set default message
    $message.html($message.data('defmsg'));

    // Now lets find all text inputs in group1
    var unique_fields_in_group1 = $("input[type=text][data-group=group1]");


    // Let's attach on change event 
    unique_fields_in_group1.keyup(function() {
        $this = $(this);
        // Now we detect what to do next:
        // If user fiiled text box up...
        if (this.value.length > 0) {
            // ... we disable others
            unique_fields_in_group1.attr('disabled', 'disabled');
            $this.removeAttr('disabled');
            // .. and show help message from filled input
            $message.html($this.data('msg'));
        } else {
            // When user cleared text box
            // we'd unlock all inputs
            unique_fields_in_group1.removeAttr('disabled');
            // and restore default help message
            $message.html($message.data('defmsg'));
        }
    });
    unique_fields_in_group1.change(function() {
        $(this).keyup();
    });
});

Full example

UPD：一些解释

$message - 使用div存储对id='message'的引用的变量;
$message.html('MSG') - 将HTML值设置为关联的div;此调用的结果为<div>MSG</div>（JQuery.html API）
$message.data('def-msg') - 从div的属性data-defmsg（jQuery.data API）中检索值
unique_fields_in_group1.attr('disabled', 'disabled') - 只需将disabled属性添加到数组中的所有字段，因此浏览器将停用这些输入字段（How to disable/enable an element with jQuery）
input[type=text][data-group=group1] - 用于获取所有输入的CSS选择器type = text和属性data-group = group1
< / LI>

<强> UPD2

为CHANGE事件添加了处理程序，以正确处理鼠标复制/粘贴事件。

Old example is here

Answer 6

2个事件绑定使得在表单字段之间切换非常容易，find demo here：

$('input[type="text"]').live('focus', function(){
    var id = this.id;
    $('input[type="text"]').each(function(){
        if ($(this).val() !== '' && id !== this.id) {
            $('input[type="text"]').not(this).attr('disabled','disabled');
            alert('Fill in either test1 or test2 but not both!');
            return false;
        };
    });
});

$('input[type="text"]').live('click', function(){
    $('input[type="text"]').removeAttr('disabled');
});

如何在jquery中写入条件？

6 个答案:

检查http://jsfiddle.net/4dqUx/3/