Question

所以，我正在创建这个表单。顶部有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个字段需要恢复正常

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

Answer 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);
      }
  });

});

Answer 3

你可以使用jQuery并检查它是否为空。请看下面的代码段：

＆＃13;

 $(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);
          }         
     
      });
 });

＆＃13;

[disabled] {
  background: #ccc;
}

＆＃13;

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

＆＃13;

希望这有帮助！

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

3 个答案: