如果第二个输入框已经填写，禁用第一个输入框。

Question

如果第二个输入框已经填写，禁用第一个输入框。

9

我是一个完全的新手，我只想知道如何在第二个输入框填写时动态禁用第一个输入框。

例如：

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

请提供任何相关链接和提示...

- debrajsy

填写完成指在第二个输入框中输入数据后，单击应用程序中的其他位置。 - Kanishka Panamaldeniya

是的，当第二个输入框被自动填充后，第一个输入框将被禁用...怎么办？ :( - debrajsy

您可以使用onchange事件或onkeydown来检测输入字段的更改。请查看我的下面的答案。 - Ibu

7个回答

2

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

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

解释:

当第二个输入框失去焦点时... .blur()
检查它是否有内容。方法是确保它的长度不为零 !=0
如果它有内容，则添加 属性 disabled 并将其设置为 disabled

- Jason Gennaro

1

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

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

});

当您填写第二个输入字段并单击其他位置时，此功能可正常使用..........

- Kanishka Panamaldeniya

1

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

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

http://jsfiddle.net/vbKjx/

- rkw

0

我喜欢这个答案，使用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>
....

- John

0

我们可以省略一些步骤，将表单视为对象进行引用。

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

- Bakudan

0

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

- Paul Sonier

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ibu · Accepted Answer

你只需要添加一个disabled属性即可：

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

你可以使用onchange事件来检测其中是否有一个已被填写：

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

如果第一个已经填满，那么第二个将被禁用