2016-02-26 86 views
-4

我試圖將JavaScript代碼添加到我的HTML頁面,但是我無法做到這一點。
我已經試過它在小提琴上,它的工作原理。工作代碼的例子就像這個鏈接(http://jsfiddle.net/kF2uK/2/)。如何將JavaScript代碼包含在

我的html代碼和javascript低於,你能告訴我如何實現它

function buttonState(){ 
 
    $("#timeslots").each(function(){ 
 
     $('#submit').attr('disabled', 'disabled'); 
 
     if($(this).val() == "") return false; 
 
     $('#submit').attr('disabled', ''); 
 
    }) 
 
} 
 

 
$(function(){ 
 
    $('#submit').attr('disabled', 'disabled'); 
 
    $('#timeslots').change(buttonState); 
 
})
<!DOCTYPE html> 
 
\t 
 
\t <body class="container-fluid"> \t 
 
      <div class="container"> 
 
          
 
        <form> 
 
         <div class="form-horizontal"> 
 
          <div class="form-group"> 
 
           <label class="col-md-2 control-label">Day *</label> 
 
           <div class="col-md-4"> 
 
            <select class="form-control" id="day"> 
 
             <option selected>Select</option> 
 
             <option>Monday</option> 
 
             <option>Tuesday</option> 
 
             <option>Wednesday</option> 
 
             <option>Thursday</option> 
 
             <option>Friday</option> 
 
            </select> 
 
           </div> 
 
          </div> 
 
                 
 
          <div class="form-group"> 
 
           <label class="col-md-2 control-label">Time *</label> 
 
           <div class="col-md-4"> 
 
            <select class="form-control" id="timeslots"> 
 
             <option selected>Select (5 Slots Available)</option> 
 
             <option disabled>09.00</option> 
 
             <option>10.00</option> 
 
             <option disabled>11.00</option> 
 
             <option>12.00</option> 
 
             <option>13.00</option> 
 
             <option disabled>14.00</option> 
 
             <option>15.00</option> 
 
             <option disabled>16.00</option> 
 
             <option>17.00</option> 
 
            </select> 
 
           </div> 
 
          </div> 
 

 
          <div class="form-group"> 
 
           <div class="col-md-offset-2 col-md-4"> 
 
           <button class="btn btn-success btn-block" id="submit">Submit</button> 
 
           </div> 
 
          </div> 
 
         </div> 
 
        </form> 
 
      </div> 
 
      
 
     </body>

+0

哪裏是你的'

0

把JavaScript插入一個名爲myscript.js

// this is myscript.js 
    function buttonState(){ 
    $("#timeslots").each(function(){ 
     $('#submit').attr('disabled', 'disabled'); 
     if($(this).val() == "") return false; 
     $('#submit').attr('disabled', ''); 
    }) 
} 

$(function(){ 
    $('#submit').attr('disabled', 'disabled'); 
    $('#timeslots').change(buttonState); 
}) 

把HTML不同的文件保存爲index.html的

<!-- this is index.html --> 
<!DOCTYPE html> 

    <body class="container-fluid"> 
      <div class="container"> 

        <form> 
         <div class="form-horizontal"> 
          <div class="form-group"> 
           <label class="col-md-2 control-label">Day *</label> 
           <div class="col-md-4"> 
            <select class="form-control" id="day"> 
             <option selected>Select</option> 
             <option>Monday</option> 
             <option>Tuesday</option> 
             <option>Wednesday</option> 
             <option>Thursday</option> 
             <option>Friday</option> 
            </select> 
           </div> 
          </div> 

          <div class="form-group"> 
           <label class="col-md-2 control-label">Time *</label> 
           <div class="col-md-4"> 
            <select class="form-control" id="timeslots"> 
             <option selected>Select (5 Slots Available)</option> 
             <option disabled>09.00</option> 
             <option>10.00</option> 
             <option disabled>11.00</option> 
             <option>12.00</option> 
             <option>13.00</option> 
             <option disabled>14.00</option> 
             <option>15.00</option> 
             <option disabled>16.00</option> 
             <option>17.00</option> 
            </select> 
           </div> 
          </div> 

          <div class="form-group"> 
           <div class="col-md-offset-2 col-md-4"> 
           <button class="btn btn-success btn-block" id="submit">Submit</button> 
           </div> 
          </div> 
         </div> 
        </form> 
      </div> 

     </body> 

index.html中添加腳本標籤只是在body標籤關閉之前(一個封閉的body標籤看起來像這樣:</body>),源代碼指向你新創建的javascript文件。

<script src="myscript.js"></script> 
</body> 

不過,因爲要使用jquery你必須到該腳本添加到HTML文件中。你可以下載jQuery或使用谷歌CDN。它需要包含在腳本標記之前,因爲腳本使用jQuery。本例使用CDN,所以它會工作,但如果你在實際項目中使用jQuery我建議將其下載到您的項目目錄,並添加你喜歡做的myscript.js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
<script src="myscript.js"></script> 
</body> 
+0

我已經完全像你剛纔提到的那樣,問題是,即使從