2013-03-09 4 views
0

저는 선택 상자 값에 따라 사용되는 양식 필드가 두 가지로 다른 양식이 있습니다. 내가 가진 문제는 관련이없는 입력 필드를 비활성화하려고 할 때입니다. disabled 속성은 다음과 같이 표시됩니다. disabled = "disabled"대신 ""disabled "= 사용중인 코드입니다. 관련 분야를 사용할 수 있도록 상당히 복잡한 형식이므로 가능한 한 간단하게 유지하려고 노력할 수 있습니다. 뭔가 빠졌다고 생각되면 ... 더 많이 볼 필요가 있으면 알려주세요.uniForm을 사용하고 입력을 사용하지 않으려 고합니다.

<cfform id="entry-form" ACTION="index-10.cfm?Company" name="send" class="uniForm"> 
     <div class="ctrlHolder"><label for="" style="display:none"><em>*</em>Builder or Individual</label>       
         <cfselect name="select1" id="select1">     
          <option value="" <cfif Individual is "">selected="selected"</cfif>>Who is this Case for? (choose one)</option>     
          <option value="0"<cfif Individual is 1>selected="selected"</cfif>>An Individual Home Owner</option>     
          <option value="1"<cfif Individual is not 1 and Individual is not "">selected="selected"</cfif>>A Builder</option>    
         </cfselect> 
        <p class="formHint">A selection is required</p>   
    </div> 

    <!--- this is for individual home owner. --->   
       <div class="hide" id="hide1"> 

        <div class="ctrlHolder"><label for="" style="display:none"><em>*</em>First name</label> 
        <cfinput type="text"    
           name="FirstName" 
           id="FirstName" 
           data-default-value="Enter your first name" 
           size="35" 
           class="textInput required validateAlpha" 
           maxlength="50" 
           value="#FirstName#"> 
        <p class="formHint">First Name is required</p> 
        </div> 
       </div> 

       <div class="hide" id="hide2"> 

       <div class="ctrlHolder"><label for="" style="display:none"><em>*</em>Builder Name</label> 
        <cfinput type="text" id="builder" 
           name="BuilderName" 
           data-default-value="Type a builder's name" 
           size="35" 
           class="textInput required" 
           value="" /> 
         <p class="formHint">Builder's name is required</p> 
         <cfinput id="builder_hidden" name="BuilderID" type="hidden" value="" /> 
         <cfinput id="builder_hidden_plan" name="PlanID" type="hidden" value="" /> 
        </div> 
       </div> 
</cfform> 

    <script> 

    $(document).ready(function(){  
     $("#select1").change(function(){   
      if ($(this).val() == "1") {    
       $("#hide2").slideDown("fast"); //Slide Down Effect    
       $("#hide1").slideUp("fast"); 
       $("#FirstName").prop("disabled", true); 
         $("#builder").prop("disabled", false); 
    } else if ($(this).val() == "0"){    
       $("#hide1").slideDown("fast"); //Slide Down Effect    
       $("#hide2").slideUp("fast"); 
         $("#FirstName").prop("disabled", false); 
         $("#builder").prop("disabled", true);  
      } 
     }); 
</script> 

내가 사용하고 있습니다 :

  • JQuery와-1.9.1.js
  • JQuery와-UI-1.10.1.custom.js
  • 유니 폼 validation.jquery.js을

답변

1

문제점을 발견했습니다. 비활성화 된 속성이 추가되었습니다. 이 클래스가 작동하지 않도록하는 필수 클래스였습니다. 이 문제를 해결하기 위해 removeClass 및 addClass 메서드를 추가했습니다.

0

잘 작동되면 아래의 스크립트를 확인 & 'ATTR'에 jQuery를 '소품'을 변경해주십시오 .....

<script type="text/javascript"> 
$(document).ready(function(){  
    $("#select1").change(function(){   
     if ($(this).val() == "1"){    
      $("#hide2").slideDown("fast"); //Slide Down Effect    
      $("#hide1").slideUp("fast"); 
      $("#firstname").attr("disabled", "disabled"); 
      $("#builder").attr("disabled", false); 
     } 
     else if ($(this).val() == "0"){    
      $("#hide1").slideDown("fast"); //Slide Down Effect    
      $("#hide2").slideUp("fast"); 
      $("#firstname").attr("disabled", false); 
      $("#builder").attr("disabled", "disabled");  
     } 
    }); 
}); 

관련 문제