2016-02-26 68 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

我已经完全像你刚才提到的那样,问题是,即使从