如果填充了第二个输入字段，则禁用输入字段

totally a newbie... I just want to know how to dynamically disable an input field when the second input field is filled

完全是新手...我只是想知道如何在第二个输入字段填充时动态禁用输入字段

eg:

例如：

<td><input type="text" name="num-input1" id="dis_rm"  value=""></input></td>
<td><input type="text" name="num-input2" id="dis_per" value="" ></input></td>

pls... any links and hints will do...

请...任何链接和提示都会...

7 个解决方案

#1

You simply need to give it a disabled property:

你只需要给它一个残疾人财产：

document.getElementById("dis_rm").disabled = true;
document.getElementById("dis_per").disabled = true;

you can use the on change event to see if one of them is filled:

您可以使用on change事件来查看其中一个是否已填充：

var dis1 = document.getElementById("dis_rm");
dis1.onchange = function () {
   if (this.value != "" || this.value.length > 0) {
      document.getElementById("dis_per").disabled = true;
   }
}

so if the first one is filled, the second one will be disabled

因此，如果第一个填充，第二个将被禁用

#2

$('#dis_per').blur(function(){
    if($(this).val().length != 0){
        $('#dis_rm').attr('disabled', 'disabled');
    }       
});

http://jsfiddle.net/jasongennaro/D7p6U/

Explanation:

说明：

when the second input loses focus... .blur()

当第二个输入失去焦点时... .blur（）
check to see if it has something inside it. Do this by making sure its length is not zero !=0

检查它内部是否有东西。通过确保其长度不为零来做到这一点！= 0
if it has something in it, add the attribute disabled and set it to disabled

如果它中包含某些内容，请添加禁用的属性并将其设置为禁用

#3

$('#secondinput').live('blur',function(){

    $('#firstinput').attr('disabled', true);

});

tihs works when you filled the second input field and click else where ..........

当你填充第二个输入字段并点击其他地方时，tihs工作..........

#4

Set the disabled flag on the field you want to disable when the OnBlur event fires (for exiting the field) or when the OnChanged event fires (with, of course, validation on the change).

当OnBlur事件触发（用于退出字段）或OnChanged事件触发时（当然，对更改进行验证），在要禁用的字段上设置禁用标志。

#5

Just ad this to your 2nd text box:

只需将此广告添加到您的第二个文本框：

onblur="document.getElementById('dis_rm').disabled = (''!=this.value);"

http://jsfiddle.net/vbKjx/

#6

We can ommit some steps, refering to the form as object.

我们可以省略一些步骤，将表单称为对象。

document.form1.num-input2.onchange = function() {
    if ( this.value != "" || this.value.length > 0 ) {
        document.form1.num-input1.disabled = true;
    }
}

#7

I like this answer, using Jquery:

我喜欢这个答案，使用Jquery：

$('#seconddiv').live('focus',function(){
    $('#firstdiv').attr('disabled', true);
});

I have a search bar that gives search results with every key press, if it returns no results then the user is presented with a form to ask for help. But if they fill out the "ask form" then type in the search bar again it will erase everything they entered in the ask form. So to solve this, I gave all the inputs in the ask form an id of "second div" and the search field id="firstdiv". Now, if they click or tab to one of the input fields of the ask form it will disable to search bar so their data will never be over written.

我有一个搜索栏，每次按键都会显示搜索结果，如果没有结果，则会向用户显示一个表单以寻求帮助。但如果他们填写“询问表格”，然后再次输入搜索栏，它将删除他们在询问表格中输入的所有内容。所以为了解决这个问题，我在ask表单中给出了所有输入id为“second div”和搜索字段id =“firstdiv”。现在，如果他们单击或选项卡到ask表单的其中一个输入字段，它将禁用搜索栏，以便他们的数据永远不会被覆盖。

I will also add a button that will re-enable the search form if they change their mind.

我还将添加一个按钮，如果他们改变主意，将重新启用搜索表单。

And for the newbies - I put the code in the head of the document like this:

对于新手 - 我把代码放在文档的头部，如下所示：

<html>
<head>
<script type="text/javascript">
$('#seconddiv').live('focus',function(){
    $('#firstdiv').attr('disabled', true);
});
</script>
</head>
<body>
....

#1