Fatal编程技术网
  • javascript/
  • Javascript 如何在jquery中编写条件？

Javascript 如何在jquery中编写条件？

javascript jquery

Javascript 如何在jquery中编写条件？,javascript,jquery,Javascript,Jquery,我有两个文本输入字段，如下所示： <input type="text" id="test1".../> <input type="text" id="test2".../> 现在我希望访问者只能填写其中一个文本输入。例如，如果#test1有一个值，当访问者试图在#test2中输入一个值时，如果您有多个文本，则警报框应显示“填写test1或test2，但不能同时填写两者”。。使用类。下面的代码也不会禁用，但不会让您关注它。如果要禁用，请使用以下代码 $('.text'

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

<input type="text" id="test1".../>
<input type="text" id="test2".../>
现在我希望访问者只能填写其中一个文本输入。例如，如果
#test1
有一个值，当访问者试图在
#test2
中输入一个值时，如果您有多个
文本，则警报框应显示“填写test1或test2，但不能同时填写两者”。
。使用类。下面的代码也不会禁用，但不会让您关注它。如果要禁用，请使用以下代码


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


类似于的东西


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



如果您有多个
文本。使用类。下面的代码也不会禁用，但不会让您关注它。如果要禁用，请使用以下代码


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


类似于的东西


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



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


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



检查上的工作示例，如果我理解正确，这就是您需要的


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


检查HTML上的工作示例

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


您还可以在屏幕上看到它，它提供警报并禁用复选框。
HTML


<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")

});


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



您还可以在屏幕上看到它提供警报并禁用复选框。
您可以使用以下解决方案：


<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")

});


1） 将
数据组
和
数据消息
属性添加到输入中，如：


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


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




UPD：一些解释


    

  • $message
    -使用
    id='message'
    存储对
    div
    的引用的变量
    • 

  • $message.html（'MSG'）
    --将html值设置为关联的
    div
    ；此调用的结果是
    MSG
    （）
    • 

  • $message.data（'def-msg'）
    --从div的属性
    data defmsg
    （）
    • 

  • unique\u fields\u in_group1.attr（'disabled'、'disabled'）
    ——只需将
    disabled
    属性添加到数组中的所有字段，所以浏览器将禁用这些输入字段（）
    • 

  • input[type=text][data group=group1]
    -是CSS选择器，用于使用have
    type
    =
    text
    和属性
    数据组获取所有输入
    • 


UPD2

添加了更改事件的处理程序，以正确处理鼠标复制/粘贴事件


您可以使用以下解决方案：

1） 将
数据组
和
数据消息
属性添加到输入中，如：


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


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




UPD：一些解释


    

  • $message
    -使用
    id='message'
    存储对
    div
    的引用的变量
    • 

  • $message.html（'MSG'）
    --将html值设置为关联的
    div
    ；此调用的结果是
    MSG
    （）
    • 

  • $message.data（'def-msg'）
    --从div的属性
    data defmsg
    （）
    • 

  • unique\u fields\u in_group1.attr（'disabled'、'disabled'）
    ——只需将
    disabled
    属性添加到数组中的所有字段，所以浏览器将禁用这些输入字段（）
    • 

  • input[type=text][data group=group1]
    -是CSS选择器，用于使用have
    type
    =
    text
    和属性
    数据组获取所有输入
    • 


UPD2

添加了更改事件的处理程序，以正确处理鼠标复制/粘贴事件


2使表单字段之间的切换非常容易的事件绑定：


2个事件绑定使得表单字段之间的切换非常容易：


请不要使用警告框，而是禁用其他文本框。警报框通常非常烦人…感谢您的提示。如果不使用警报，请不要使用警报框。如何禁用其他文本框。请不要为此使用警报框，而是禁用其他文本框。警报框通常很烦人…谢谢你的提示，。如果不使用警报。如何禁用其他文本框。如果不使用警报。如何禁用其他文本框。谢谢，我不能使用type=“text”，因为有5个输入框。如何修改代码。谢谢you@enjoylive您确定只有两个文本框吗。@enjoylife好的，您可以使用类来添加该功能的元素，代码也已经更新@enjoylife您提到的代码将属性
disabled
添加到
.text
。由于我们可能会点击backspace，并且该值可能为null，因此必须重新启用另一个元素，因此使用keyup。如果不使用alert，则如何禁用另一个文本框。谢谢，我不能使用type=“text”，因为有5个输入框。如何修改代码。谢谢you@enjoylive您确定只有两个文本框吗。@enjoylife好的，您可以使用类来添加该功能的元素，代码也已经更新@enjoylife您提到的代码将属性
disabled
添加到
.text
。由于我们可能会点击backspace，并且值可能为null，所以必须重新启用另一个元素，因此使用keyup。$（'test1'）.keyup（function（）{if（$（'test2'）.val（）.length）{alert（'test2已经有值'）；$（this.val（''；}）$（'test2'）.keyup（function（）{if（$（$（'test1'）.val（）.length）{alert（'test1已经有一个值了）；$（this.val（'''）；}}$（'test1'）.keyup（function（）{if（$）（'test2'）.val（）.length）{alert（'test2已经有一个值'）；$（this.val（''）；}$（'test2'）.keyup（function（）{if（$）（'test1'）.val（）.length）{alert（'test1已经有一个值）；$（this.val（'val（））））.length）}）你的代码对我来说太难了。很抱歉，我是一个编程新手。什么是$message.html和$message.data（'defmsg'），唯一的\u字段\u在\u group1.attr（'disabled'，'disabled'）；意思是；；为什么在中使用这个