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

【问题标题】：Disable an input field if second input field is filled如果填充了第二个输入字段，则禁用输入字段
【发布时间】：2011-10-09 22:05:41
【问题描述】：

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

例如：

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

请...任何链接和提示都可以...

【问题讨论】：

填充表示在第二个输入字段中输入数据并单击应用程序中的其他位置后？？
是的..在第二个输入自动填充后，第一个被禁用...如何？ :(
您可以使用 onchange 事件或 onkeydown 来检测输入字段的变化。请看下面我的回答
@debrajsy 请看我的回答....... :)

标签： javascript jquery ajax forms

【解决方案1】：

你只需要给它一个 disabled 属性：

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

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

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

所以如果第一个被填充，第二个将被禁用

【讨论】：

大家可以使用onkeydown事件来查看其中一个是否为空
@debrajsy 这是我的代码的工作Fiddle。当您填写一个字段时，另一个字段被禁用，当您清除它时，一切都恢复正常
@debrajsy 如果此答案帮助您解决了问题，请单击旁边的复选标记将其选为正确答案。谢谢

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

});

当您填写第二个输入字段并单击 else where .......... 时，此功能有效。

【讨论】：

【解决方案4】：

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

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

解释：

当第二个输入失去焦点时....blur()
检查里面是否有东西。通过确保其长度不为零来做到这一点!=0
如果里面有东西，添加attributedisabled并将其设置为disabled

【讨论】：

【解决方案5】：

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

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

http://jsfiddle.net/vbKjx/

【讨论】：

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

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

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

我有一个搜索栏，每次按键都会给出搜索结果，如果它没有返回任何结果，那么用户会看到一个表单来寻求帮助。但是，如果他们填写“询问表”，然后再次在搜索栏中输入，它将删除他们在询问表中输入的所有内容。因此，为了解决这个问题，我在询问表单中为所有输入提供了“第二个 div”的 id 和搜索字段 id="firstdiv"。现在，如果他们单击或跳到询问表单的其中一个输入字段，它将禁用搜索栏，因此他们的数据永远不会被覆盖。

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

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

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

【讨论】：