체크 박스가 표시된 후 필수 필드가 표시됩니다.

저는 JavScript를 처음 사용하고 있으며, 필요한 클래스를 토글하여 확인란에 표시 한 후 정보를 필드에 입력해야하는 양식을 만들려고합니다. 2 일 동안 "Gymnasium"체크 박스를 선택하면 "Start Date"에 필수 입력란을 만들 수 없습니다. 도움이 될 것입니다.체크 박스가 표시된 후 필수 필드가 표시됩니다.

는 여기에 지금까지이 작업은 다음과 같습니다

<!DOCTYPE html> 
    <html> 
    <head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script> 
    <script type="text/javascript">  

    $(document).ready(function(){ 
     $("#gym").change(function(){    
      $("#togg1").toggle(this.checked); 
      $("#startDate").toggleClass("required"); 
      $("#endDate").toggleClass("required"); 
      $("#startTime").toggleClass("required"); 
      $("#endTime").toggleClass("required"); 

    if(this.checked){ 
      $("#startDate").attr('required','required'); 
      $("#endDate").attr('required','required'); 
      $("#startTime").attr('required','required'); 
      $("#endTime").attr('required','required'); 
     } 
     else{ 
      $("#startDate").removeAttr('required') 
      $("#endDate").removeAttr('required') 
      $("#startTime").removeAttr('required') 
      $("#endTime").removeAttr('required') 
     } 

     }); 
    }); 

    </script> 


    </head> 
    <body> 


    <div id="courseForm" style="width: 500px; border: 1px solid #000; padding: 50px 0 50px 50px;margin: 0 auto;"> 
    <form id="serviceForm" action="#" onSubmit="required(this);" method="POST" enctype="text/plain"> 
    <input name="orgid" type="hidden" value="000001" /> 
    <input name="retURL" type="hidden" value="#" /> 
    <label for="company">* Agency Requesting Facility:</label> 
    <br /> 
    <input id="company" required="required" maxlength="50" name="company" size="50" type="text" /> 
    <br /> 
    <br /> 
    <label for="name">* Agency Contact:</label> 
    <br /> 
    <input id="name" required="required" maxlength="50" name="name" size="50" type="text" /> 
    <br /> 
    <br /> 
    <label for="phone">* Contact Phone Number:</label> 
    <br /> 
    <input id="phone" required="required" maxlength="14" name="phone" size="14" type="text" /> 
    <br /> 
    <br /> 
    <br />Courses offered 
    <br /> 

<input id="gym" name="gym" type="checkbox" value="1" />Gymnasium 
    <br /> 
    <span id="togg1" style="display:none"> 
      <span id="togg2" style="display:inline"> 
       <lable for="startDate">* Start Date:</lable> 
        <input id="startDate" maxlength="10" name="startDate" size="10" /> 
      </span> 
      <span id="togg2" style="display:inline"> 
       <lable for="endDate">* End Date:</lable> 
        <input id="endDate" maxlength="10" name="endDate" size="10" /><br /><br /> 
      </span> 
      <span id="togg2" style="display:inline"> 
       <lable for="startTime">* Start Time:</lable> 
        <input for="startTime" maxlength="7" name="startTime" size="7" /> 
      </span> 
      <span id="togg2" style="display:inline"> 
       <lable for="endTime">* End Time:</lable> 
        <input for="endTime" maxlength="7" mane="endTime" size="7" /><br /> 
      </span> 
    </span> 

    <br /> 
    <br /> 
    <label for="description">Comments:</label> 
    <br /> 
    <textarea name="description" cols="40" rows="5"></textarea> 
    <br /> 
    <br />* denotes required fields 
    <br /> 
    <input type="submit" name="submit" id="submit" value="SUBMIT" /> 
</form> 
</div> 
</body> 
</html>

출처

2013-03-29 Brandon

'시작 날짜'에 속성 '필요'와 jsfiddle을 주어 추가하려면 솔루션이 있다고 생각하십시오. – netadictos

당신은 잊지은 내가 편집 한 내 대답을

$(document).ready(function(){ 
    $("#gym").change(function(){    
     $("#togg1").toggle(this.checked); 
     $("#startDate").toggleClass("required"); 

     if(this.checked){ 
      $("#startDate").attr('required','required'); 
     }else{ 
      $("#startDate").removeAttr('required') 
     } 

    }); 
});

출처

2013-03-29 19:21:57 Adi

위대한 작품. 변경 사항을 반영하도록 초기 게시물을 변경했습니다. 이 필드를 4 필드로 구현하려고하지만 시간 필드가 작동하지 않습니다. 내가 뭘 잘못하고 있는지 말해 줄 수있어? – Brandon

원래 질문에 답변했습니다. 이것은 완전히 새로운 문제입니다. 그런 시나리오에서는 별도의 질문으로 게시하십시오. . 문제는 'id'가 모든 입력 요소에 대해 동일하다는 것입니다. jquery 선택기의 작동 방식에 대해 조금 읽으십시오. – Adi

아, "id"가 아닌 "for"로 설정된 시간 입력을 받았습니다. 도움 주셔서 대단히 감사합니다. – Brandon

당신은 "onSubmit"의 "요구"함수를 호출합니다. "필수"기능이 없기 때문에 이것은 꼭 필요한 것은 아닙니다.

그런 다음 다음 줄을 추가해야합니다 : A의

$("#serviceForm").validate();

"$ (문서) .ready"전화를 DOM이로드 된 후이 실행되도록.

http://jsfiddle.net/4rscN/

나는 다음과 같은 플러그인 사용되어왔다 : 여기

당신이 어떻게 작동하는지의 예를 가지고 http://docs.jquery.com/Plugins/Validation

그렇지 않은 경우, 당신은 그것을 추가해야합니다.

validate 플러그인의 경우 필수 속성이 아니라 필수 클래스를 사용해야한다고 생각합니다. HTML5에서 사용할 수있는 속성 인 필수 속성과 필요한 클래스를 혼합하지만 모든 브라우저가 해당 속성을 지원하는 것은 아니며 항상 고려해야합니다. 이것에 대해 좋은 참고로

http://caniuse.com/#search=required

출처

2013-03-29 19:21:50 netadictos

답변 해 주셔서 감사합니다. 나는 그것을 작동시키지 못했지만, 미래에는 그것을 사용할 것이다. – Brandon

체크 박스가 표시된 후 필수 필드가 표시됩니다.

답변

관련 문제