Отключить поля до заполнения основного поля

Итак, im создавая эту форму. В верхней части находятся 3 основных поля. игнорируйте остальные. Название организации, отдел и адрес. пользователь должен ввести некоторые данные в поле «Организация» для Департамента и Адрес для использования.Отключить поля до заполнения основного поля

Here is the form вот макет, который я сделал. это то, как должно выглядеть, если пользователь не помещает какую-либо информацию в название организации.

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

ив удалось сделать его похожим на это, используя предложения ниже. нижние 2 поля должны вернуться к нормальной, когда я добавить данные в поле Организация

источник

2016-12-07 Umar Gora

Пожалуйста, добавьте свою разметку сюда, чтобы мы могли помочь. Изображения визуализированного HTML бесполезны для будущих читателей или потенциальных ответчиков. – BenM

Попробуйте это: 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>

источник

2016-12-07 13:20:01 Deadpool

Пожалуйста, примите ответ, если это поможет. – Deadpool

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

});

источник

2016-12-07 13:21:31

@Deadpool попробуйте, если это сработает, отметьте это правильно –

в порядке, однако это работает. когда название организации заселяется, отдел и адрес остаются серыми, и я не могу ввести данные –

@ Умар Гора Я не могу получить вас –

Вы можете использовать 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" />

Надеется, что это помогает!

источник

2016-12-07 13:21:57

Отключить поля до заполнения основного поля

ответ

Смежные вопросы