logo标签列表

禁用字段直到主字段填写完毕

jqueryhtmlcssforms
3
所以，我正在创建这个表单。在顶部有3个主要字段。忽略其他的。组织名称，部门和地址。用户必须在组织字段中输入一些数据，才能使用部门和地址字段。 这是表格，这是我做的一个模型。如果用户没有在组织名称中输入任何信息，它应该看起来像这样。 图片2 
      <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>

我已经根据以下建议将其修改为如下所示。当我在组织字段中添加数据时，底部的两个字段需要恢复正常。

Result

请在此处添加您的标记以便我们提供帮助。对于未来的读者或潜在的回答者来说，渲染后的HTML图像没有用处。 - BenM
3个回答
1
你可以使用jQuery来检查它是否为空。请查看下面的代码片段： 

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

希望这有所帮助！
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>
1
$(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
@Umar Gora 我无法理解你的意思。 - Ruchi
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接