javascript - 有条件地启用禁用下拉列表和文本字段

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").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);

    }

});