禁用字段，直到填充主字段答案

【问题标题】：Disable fields until main field is populated禁用字段，直到填充主字段
【发布时间】：2016-12-07 13:11:42
【问题描述】：

所以，我正在创建这个表单。顶部有 3 个主要字段。忽略其他人。组织名称、部门和地址。用户必须在“部门”和“地址”的“组织”字段中输入一些数据才能使用。

Here is the form 这是我做的一个模型。如果用户没有在组织名称中输入任何信息，这就是它的样子。

      <div class="control-group required">
            <label class="control-label">Organisation Name <em>*</em></label>
            <div class="controls">
                <div class="input-append input-prepend">
                    <input type="text" class="input-xxlarge" id="Organisation-Name">
                    <button type="button" class="btn" href=""> Find</button>

                </div>

            </div>
        </div>

        <div class="control-group">
            <label class="control-label">Department</label>
            <div class="controls">
                <div class="input-append input-prepend">

                    <input type="text" class="input-xxlarge" id="Department">
                    <button type="button" class="btn" href=""> Find</button>

                </div>
                <span class="help-inline"><i class="help" title="Enter the Department of this Opportunity.">Help</i></span>
            </div>
        </div>

        <div class="control-group">
            <label class="control-label">Address</label>
            <div class="controls">
                <div class="input-append input-prepend">

                    <input type="text" class="input-xxlarge" id="Address">
                    <button type="button" class="btn" href=""> Find</button>

                </div>
                <span class="help-inline"><i class="help" title="Enter the Address for this Opportunity.">Help</i></span>
            </div>
        </div>

使用以下建议，我设法使它看起来像这样。当我在组织字段中添加数据时，底部 2 个字段需要恢复正常

【问题讨论】：

请在此处添加您的标记，以便我们提供帮助。呈现的 HTML 图像对未来的读者或潜在的回答者没有用处。

标签： jquery html css forms

【解决方案1】：

试试这个：https://jsfiddle.net/x0fwf6ro/

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
</head>
<body> 

Name: <input id="name" type="text"> <br/>
Age: <input id="age" type="text" disabled> <br/>
Roll No: <input id="rollNo" type="text" disabled> 

<script>

$(document).ready(function(){
    $('#name').keyup(function(){
        val = $('#name').val();
        if(!!val){
            $('#age').prop("disabled", false);
            $('#rollNo').prop("disabled", false);
        }
        else{
            $('#age').prop("disabled", true);
            $('#rollNo').prop("disabled", true);
        }
    });
});

</script>

</body> 

</html>

【讨论】：

【解决方案2】：

$(document).ready(function(){
   $("#Department_id").attr("disabled",true);
   $("#Address_id").attr("disabled",true);

   $(document).on("keypress", "#Organisation_id", function(){
     if($("#Organisation_id").val() !='' || $("#Organisation_id").val()!=NULL)
       {
         $("#Department_id").removeAttr("disabled");
         $("#Address_id").removeAttr("disabled");
       }
      else
       {
         $("#Department_id").attr("disabled",true);
         $("#Address_id").attr("disabled",true);
      }
  });

});

【讨论】：

好的，但是这行得通。当组织名称被填充时，部门和地址保持灰色，我无法输入数据
@Umar Gora 我找不到你

【解决方案3】：

您可以使用 jQuery 并检查其是否为空。看看下面的sn-p：

 $(document).ready(function() {
     
     $("#field1").focus();
     
     var error_message = "Please add field 1.";
     
      $("#field1").blur(function() {
          if ($(this).val() != '')
          {
              $("#field2").removeAttr("disabled");    
              $("#message").html("");
          }
     else {              
              $("#field2").attr("disabled", "disabled");  
              alert(error_message);
          }         
     
      });
 });

[disabled] {
  background: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Field 1: <input id="field1" type="text" /><br/><br/>
Field 2: <input id="field2" type="text" />

希望这会有所帮助！

【讨论】：