禁用表单字段,直到上一个字段已填充 JavaScript

Disable form fields until a previous field has been filled with JavaScript

本文关键字:字段 上一个 填充 JavaScript 表单      更新时间:2023-09-26

使用 JavaScript;我们可以将另一个文本字段设置为依赖于第一个或上一个文本字段吗?

例如,如果我们有一个名字和姓氏字段,我想禁用姓氏字段,直到输入名字的值。

我做了一个小提琴,你可以看看:http://jsfiddle.net/phillipkregg/7bkrn/2/

它并不完美,但它会给你一些可以玩耍和练习的东西。 如果您保留"名字"字段而不填写,则会锁定"姓氏"字段。

如果你想使用JQuery,这是执行javascript的一种方法:

 $(document).ready(function() {
     $("#first_name_field").focus();
     var error_message = "Please add first name.";
      $("#first_name_field").blur(function() {
          if ($(this).val() != '')
          {
              $("#surname_field").removeAttr("disabled");    
              $("#message").html("");      
          }
     else {              
              $("#surname_field").attr("disabled", "disabled");  
              $("#message").append(error_message);      
          }         
      });
 });​

如果您打算使用验证(您应该这样做),那么您应该查看一个名为JQuery Validation - http://docs.jquery.com/Plugins/Validation

我只是在这里做了一个快速的,向您展示一种方法。

尝试使用此代码。

<input type="text" name="fname" id="fname" onkeyup="check()" />
<input type="text" name="lname" id="lname" disabled="disabled"  />

JavaSCript

function check() {
if(document.getElementById('fname').value != "")
    document.getElementById('lname').disabled = false;
else
    document.getElementById('lname').disabled = true;
}

已经。您可以在 JavaScript 中使用 "input" html 标记和 "onChange" 事件的 "readonly" 属性(例如)。这只是客户端功能。不要为此目的使用 php)。