複選框後必填字段標記爲

我對JavScript非常陌生，我試圖創建一個窗體，需要在複選框標記後通過切換所需的類來輸入信息。我已經嘗試了兩天，並且如果選中「健身房」框，我無法將「開始日期」設置爲必填字段。任何幫助將是偉大的。複選框後必填字段標記爲

這是我到目前爲止有：

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

哦，我的輸入時間設置爲「for」而不是「id」。非常感謝您的幫助。 – Brandon