ドロップダウンとテキストフィールドを条件付きで無効にする

Question

JavaScriptを使用してテキストボックスとドロップダウンメニューを有効または無効にしようとしていますが、何も問題はありません。

<style type="text/css"> 
     .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { 
     color: black; 
    } 
    </style> 
    <div class="right_col" style="min-height: 930px;"role="main"> 
     <div class=""> 
     <div class="page-title"> 
      <div class="title_left"> 
      <h3><?php echo $mainHeader;?></h3> 
     </div> 
     <div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search"> 
     </div> 
     </div> 
    </div> 
    <div class="clearfix"></div> 
    <div class="row"> 
     <div class="col-md-12 col-sm-12 col-xs-12"> 
     <div class="x_panel"> 
      <div class="x_title">Choose from <?php echo $buttonName; ?> below</div> 
      <div class="x_content"> 
      <?php 
      if($type == 'balance_sheet'){ 
       ?> 
       <form id="createUserForm" action="<?php echo base_url(); ?>supply_chain/balance_sheet" method="POST" data-parsley-validate class="form-horizontal form-label-left"> 
       <fieldset> 
       <div class="item form-group"> 
       <div class="col-md-3 "> 
        <p style="padding: 5px;"> 
        <label class="control-label" for="Financial_year" > 
        <input type="radio" name="historical_data" id="yearly" value="Previous Financial Year" class="flat"/>&nbsp&nbsp&nbspPrevious Financial Year 
        </label> 
       </div> 
       </div> 
       <div class="item form-group"> 
       <div class="col-md-3 "> 
        <p style="padding: 5px;"> 
        <label class="control-label" for="quarter"> 
        <input type="radio" name="historical_data" id="quarter_data" value="Quarterly" class="flat"/>&nbsp&nbsp&nbspQuarterly</label> 
       </div> 
       <div class="col-md-9 col-sm-9 col-xs-12"> 
        <select class="select2_single form-control" name="quarter" id="quarterly_data" style="width:26%;" tabindex="-1"> 
        <option value="">Choose Quarter Period</option> 
        <option value="Jan-Mar">Jan-Mar</option> 
        <option value="Apr-Jun">Apr-Jun</option> 
        <option value="Jul-Sept">Jul-Sept</option> 
        <option value="Oct-Dec">Oct-Dec</option> 
        </select> 
       </div> 
       </div> 
       <div class="item form-group"> 
       <div class="col-md-3 "> 
        <p style="padding: 5px;"> 
        <label class="control-label" for="quarter"> 
        <input type="radio" name="historical_data" id="month_data" value="Month" class="flat" onclick="tryme()"/>&nbsp&nbsp&nbspMonthly</label> 
       </div> 
       <div class="col-md-3"> 
         <input type="text" name="monthly" id="monthly_data" placeholder="Month" class="date-picker form-control col-md-7 col-xs-12" ng-model="month"/> 
        </div> 
        </div> 
        <div class="form-group"> 
        <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3"> 
         <button type="submit" class="btn btn-success" name = "btnSubmit" >Submit <?php echo $buttonName?></button> 
         <button class="btn btn-primary" onclick="window.location.href = '<?php echo $_SERVER['HTTP_REFERER'];?>'">Cancel 
         </button> 
        </div> 
        </div> 
        </fieldset> 
       </form> 
       <?php 
       } 
        ?> 
       </div> 
       </div> 
       </div> 
      </div> 
      </div> 
     </div> 
     <script type="text/javascript"> 
       $("#Month").datepicker({ 
       format: "mm-yyyy", 
       viewMode: "months", 
       minViewMode: "months" 
      }); 
       $('#createUserForm').submit(function() { 
       return false; 
       }); 
     </script> 

これはJavaScriptファイルです。私は、テキストボックスのIDを使用し、ドロップダウンしようとしたが、そのちょうどこのお試しください

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#quarter_data, #month_data").change(function(){ 
      $("#quarterly_data, #monthly_data").val("").attr("readonly",true); 
      if($("#quarter_data").is(":checked")){ 
       $("#quarterly_data").removeAttr("readonly"); 
       $("#quarterly_data").focus(); 
      } 
      else if($("#month_data").is(":checked")){ 
       $("#monthly_data").removeAttr("readonly"); 
       $("#monthly_data").focus(); 
      } 
     }); 
    }); 
    </script> 

Answer 1

を働いていません： `#quarter_data、＃1 month_data`あなたはjqueryのセレクタとして2 IDSを使用することができることを知らなかった

$("#quarter_data").change(function(){ 
    if($(this).is(":checked")) 
    { 

    $('#monthly_data').attr("readonly", true);$('#quarterly_data').attr("disabled", false); 

    } 

    }); 

    $("#month_data").change(function() 
    { 
     if($(this).is(":checked")) 
    { 
    $('#quarterly_data').attr("disabled", true);$('#monthly_data').attr("readonly", false); 

    } 

});