Question

我是html的初学者。我有两个文本框说t1和t2如果t1填充了一些数据，那么其他文本框t2应该被禁用。请让我知道热。提前致谢

Answer 1

根据您的简单场景描述，这是一个跨浏览器并且没有任何第三方JavaScript库的实现：

<html>
<head>
<script type="text/javascript">
window.onload = function(){
  var t1 = document.getElementById("t1");
  var t2 = document.getElementById("t2");
  t1.onchange = function(){
     t2.disabled = t1.value.length > 0;
  }
}
</script>
</head>
<body>
<form>
t1:<input type="text" id="t1" name="t1" /><br/>
t2:<input type="text" id="t2" name="t2" />
</form>
</body>
</html>

Answer 2

<head>
<script type="text/javascript">
  function verify(){
    var t1 = document.getElementById ('first');
    var t2 = document.getElementById ('second');
    if (t1.value != '') {
       t2.setAttribute('disabled','disabled');
       return true; 
    } 
    if (t2.value != '') {
       t1.setAttribute('disabled','disabled');
       return true;
    }
  }
</script>
</head>
<body>
...
<input type="text" id="first" onblur="verify()">
<input type="text" id="second" onblur="verify()">
...
</body>

Answer 3

使用纯HTML无法实现此目的。

遵循progressive enhancement的准则，您应首先使用您用于处理提交数据的任何形式处理程序实施服务器端检查。

然后您可以考虑为客户端检查添加JavaScript。有点像：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Disabling form controls</title>
    </head>
    <body>
        <form id="myForm" action="http://example.com/">
          <div>
            <input name="t1">
            <input name="t2">
          </div>
        </form>
        <script type="text/javascript">
        (function () {
          var t1 = document.forms.myForm.elements.t1;
          var t2 = document.forms.myForm.elements.t2;
          var handler = function handler() {
            t2.disabled = (t1.value !== "");
          };
          t1.onchange = handler;
        }());
        </script>
    </body>
</html>

（虽然我会使用诸如YUI或jQuery之类的库来以一种更好的方式添加事件处理程序，以避免以交叉浏览器兼容的方式进行覆盖。）

您可能需要JavaScript和the DOM上的一些教程，这样才有意义。

禁用文本框

3 个答案: