Question

我的Symfony2.4项目有问题。我有2个选择和2个radiobuttons 我想禁用第一个并在每次点击时启用第二个这里是我的代码

<div class="row">
                      <div class="col-lg-3 col-md-3 ui-sortable">
                        <span class="ui-spinner ui-widget ui-widget-content ui-corner-all">
                        <input type="radio" name="group1" value="mensuelle" checked="checked"style="opacity: 1!important;" /> Mensuelle   
                        </span>
                        </div>
                      <div class="col-lg-3 col-md-7 ui-sortable">
                        <span class="ui-spinner ui-widget ui-widget-content ui-corner-all">
                        <input type="radio" name="group1" value="trimestre"style="opacity: 1!important;" /> Trimestre    
                        </span>
                        </div>
                      <div class="col-lg-3 col-md-3 ui-sortable">
                        <span class="ui-spinner ui-widget ui-widget-content ui-corner-all">

                        <select id="mois" name="mois" class="form-control" size="1">
                          <option value="Janvier">Janvier</option>
                          <option value="Fevrier">Fevrier</option>
                          <option value="Mars">Mars</option>
                          <option value="Avril">Avril</option>
                          <option value="Mai">Mai</option>
                          <option value="Juin">Juin</option>
                          <option value="Juillet">Juillet</option>
                          <option value="Aout">Aout</option>
                          <option value="Septembre">Septembre</option>
                          <option value="Octobre">Octobre</option>
                          <option value="Novembre">Novembre</option>
                          <option value="Decembre">Decembre</option>
                        </select>
                        </span>
                        </div>
                      <div class="col-lg-3 col-md-4 ui-sortable">
                          <span class="ui-spinner ui-widget ui-widget-content ui-corner-all">
                          <select id="trimest" name="trimest" class="form-control" size="1">    
                            <option value="1er Trimestre">1er Trimestre</option>
                           <option value="2eme Trimestre">2eme Trimestre</option>
                           <option value="3eme Trimestre">3eme Trimestre</option>
                           <option value="4eme Trimestre">4eme Trimestre</option>
                         </select>    

                          </span>
                        </div>

这是脚本：

    <script type="text/javascript">


                     document.getElementById('trimest').disabled=true;

                    $('input:radio[name="group1"]').change(function() {
                      if ($(this).val() === 'mensuelle') {
                        // append stuff
                        document.getElementById('trimest').disabled=true;
                        document.getElementById('mois').disabled=false;

                      }
                      else {
                        document.getElementById('trimest').disabled=false;
                        document.getElementById('mois').disabled=true;
                      }
                    });


   </script>

我在这里没有问题但是当我在我的页面中包含此文件文件时，脚本不起作用

https://drive.google.com/file/d/0B9iqIn8LtQ7gdmdZYmlhYVM1alE/view?usp=sharing

Answer 1

也许在完全设置DOM之前执行JS代码。

尝试以下内容：

$(document).ready(function() {
  //Your Code
 });

当你使用它时，你的脚本将在设置DOM后执行，所有输入等都可以通过jQuery访问

见http://learn.jquery.com/using-jquery-core/document-ready/（好主意@sebnukem）

Answer 2

假设JQuery 已正确加载。

在文档准备好之前，页面无法安全操作。＆＃34;确保在DOM准备就绪后JS代码正在运行：

<script type="text/javascript">
$(function() { // add this
  document.getElementById('trimest').disabled=true;

  $('input:radio[name="group1"]').change(function() {
    console.log('radio button clicked'); // do you see this?
    if ($(this).val() === 'mensuelle') {
      // append stuff
      document.getElementById('trimest').disabled=true;
      document.getElementById('mois').disabled=false;
    } else {
      document.getElementById('trimest').disabled=false;
      document.getElementById('mois').disabled=true;
    }
  });
); // and this
</script>

请参阅http://learn.jquery.com/using-jquery-core/document-ready/

你的控制台说什么？

加载此文件时禁用Javascript

2 个答案: