下拉菜单禁用功能无法正常运行

Question

$('.dropdown-menu.ddRange')
        .click(function(e) {
          e.stopPropagation();
        });

      function disableDropDownRangeOptions(max_values, minValue) {
        if (max_values) {
          max_values.each(function() {
            var maxValue = $(this).attr("value");
            console.log("disableDropDownRangeOptions minValue: ",minValue);
            console.log("disableDropDownRangeOptions maxValue: ",maxValue);

            if (parseInt(maxValue) < parseInt(minValue)) {
              $(this).addClass('disabled');
            } else {
              $(this).removeClass('disabled');
            }
          });
        }
      }

      function setuinvestRangeDropDownList(min_values, max_values, min_input, max_input, clearLink, dropDownControl) {

        min_values.click(function() {
          var minValue = $(this).attr('value');
          console.log("Min value: ",minValue);
          min_input.val(minValue);
          document.getElementById('price_range1').innerHTML = minValue;

          disableDropDownRangeOptions(max_values, minValue);

          validateDropDownInputs();
        });

        max_values.click(function() {
          var maxValue = $(this).attr('value');
          max_input.val(maxValue);
          document.getElementById('price_range2').innerHTML = maxValue;

          toggleDropDown();
        });

        clearLink.click(function() {
          min_input.val('');
          max_input.val('');

          disableDropDownRangeOptions(max_values);

          validateDropDownInputs();
        });

        min_input.on('input', function() {
            var minValue = min_input.val();

            disableDropDownRangeOptions(max_values, minValue);
            validateDropDownInputs();
          });

        max_input.on('input', validateDropDownInputs);

        max_input.blur('input', function() {
            toggleDropDown();
          });

        function validateDropDownInputs() {

          var minValue = parseInt(min_input.val());
          var maxValue = parseInt(max_input.val());

          if (maxValue > 0 && minValue > 0 && maxValue < minValue) {
            min_input.addClass('inputError');
            max_input.addClass('inputError');

            return false;

          } else {
            min_input.removeClass('inputError');
            max_input.removeClass('inputError');

            return true;
          }
        }

        function toggleDropDown() {
          if (validateDropDownInputs() &&
            parseInt(min_input.val()) > 0 &&
            parseInt(max_input.val()) > 0) {

            // auto close if two values are valid
            dropDownControl.dropdown('toggle');
          }
        }
      }

      setuinvestRangeDropDownList(
        $('.price_Ranges .min_value'),
        $('.price_Ranges .max_value'),
        $('.investRangePrice .freeformPrice .min_input'),
        $('.investRangePrice .freeformPrice .max_input'),
        $('.investRangePrice .btn-clear'),
        $('.investRangePrice .dropdown-toggle'));

.arrow{
color: #ccc;
    background-color: #ccc;
    display: inline-block;
    height: 1px;
    width: 12px;
    position: relative;
   
}     
.max_value{
    padding: 6px 6px 6px 30px;
}

            .price_Ranges {
                float: right;
                width: 50%;
            }
            .price_Ranges a {
                display: block;
                text-align: left;
                padding: 6px 0 6px 0;  
                color: #6f6e6e;
                font-weight: 500;
            }
            .price_Ranges a.max_value {
                padding-right: 12px;
                padding-left: 12px;
               margin-left: 30px;
            }
            .price_Ranges a.min_value {
                padding-right: 22px;
                    padding-left: 12px;
            }
            .price_Ranges a.disabled {
                pointer-events: none;
                cursor: default;
                color: #E5E4E2;
            }
            .price_Ranges a:hover {
               background: #0074e4;
               color: #fff;
               cursor: pointer; 
    text-decoration: none;
            }
            .btnClear {
                clear: both;
                border-top: 1px solid #dadada;
                padding: 5px 0 0 0;
                text-align: center;
            }
            input.inputError,
            input.inputError:focus {
                border-color: #e2231a;
                background-color: white;
                color: #e2231a;
                box-shadow: inset 0 0 5px #F7BDBB;
                border-radius: 0;
            }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

                <div class="form-group col col-md-6">
                  <div class="span2 investRange">
                    <div class="">

                      <button id="min-max-price-range" style="margin-left: 3px" class="form-control selectpicker select-btn  dropdown-toggle searchParams" href="#" data-toggle="dropdown" tabindex="6">
                        <div class="filter-option pull-left span_price">
                          <span id="price_range1"> </span> - <span id="price_range2">Price (PKR)</span></div>
                        <span class="bs-caret" style="float: right;"><span class="caret"></span></span>
                      </button>

                      <div class="investRangePrice dropdown-menu ddRange" role="menu" style="width: 350px;padding: 15px;">
                        <div class="rangemenu">
                          <div class="freeformPrice" style="display: flex">
                            <div class="col-md-5">

                              <input style="text-align: center;" name="min_price" type="text" class="min_input form-control" placeholder="Min">
                            </div>
                            <div style="margin-top: 10px;" class="col-md-2 ">To</div>
                            <div class="col-md-5">

                              <input style="text-align: center;" name="max_price" type="text" class="max_input form-control" placeholder="Max">
                            </div>
                          </div>
                          <div>


                            <div style="height:190px;overflow-y:scroll;float: left;margin-top:10px;" class="price_Ranges rangesMin col-md-5">

                              <a class="min_value" style="margin-top: 0px !important;" value="" href="javascript:void(0)">Any</a>
                              <a class="min_value" value="500000" href="javascript:void(0)">500,000</a>
                              <a class="min_value" value="1000000" href="javascript:void(0)">1,000,000</a>
                              <a class="min_value" value="2000000" href="javascript:void(0)">2,000,000</a>
                              <a class="min_value" value="3500000" href="javascript:void(0)">3,500,000</a>
                              <a class="min_value" value="5000000" href="javascript:void(0)">5,000,000</a>
                              <a class="min_value" value="6500000" href="javascript:void(0)">6,500,000</a>
                              <a class="min_value" value="8000000" href="javascript:void(0)">8,000,000</a>
                              <a class="min_value" value="10000000" href="javascript:void(0)">10,000,000</a>
                              <a class="min_value" value="11000000" href="javascript:void(0)">11,000,000</a>
                              <a class="min_value" value="15000000" href="javascript:void(0)">15,000,000</a>
                              <a class="min_value" value="17500000" href="javascript:void(0)">17,500,000</a>
                              <a class="min_value" value="20000000" href="javascript:void(0)">20,000,000</a>
                              <a class="min_value" value="25000000" href="javascript:void(0)">25,000,000</a>
                              <a class="min_value" value="30000000" href="javascript:void(0)">30,000,000</a>
                              <a class="min_value" value="40000000" href="javascript:void(0)">40,000,000</a>
                              <a class="min_value" value="50000000" href="javascript:void(0)">50,000,000</a>
                              <a class="min_value" value="75000000" href="javascript:void(0)">75,000,000</a>
                              <a class="min_value" value="100000000" href="javascript:void(0)">100,000,000</a>

                            </div>

                            <div class="col-xs-1 col-sm-1 col-md-2"></div>

                            <div style="height:190px;overflow-y:scroll;margin-top: 10px;" class="price_Ranges rangesMax col-md-5">

                              <a class="max_value" style="margin-top: 0px !important;" value="" href="javascript:void(0)">Any</a>

                              <a class="max_value" value="500000" href="javascript:void(0)">500,000</a>
                              <a class="max_value" value="1000000" href="javascript:void(0)">1,000,000</a>
                              <a class="max_value" value="2000000" href="javascript:void(0)">2,000,000</a>
                              <a class="max_value" value="3500000" href="javascript:void(0)">3,500,000</a>
                              <a class="max_value" value="5000000" href="javascript:void(0)">5,000,000</a>
                              <a class="max_value" value="6500000" href="javascript:void(0)">6,500,000</a>
                              <a class="max_value" value="8000000" href="javascript:void(0)">8,000,000</a>
                              <a class="max_value" value="10000000" href="javascript:void(0)">10,000,000</a>
                              <a class="max_value" value="11000000" href="javascript:void(0)">11,000,000</a>
                              <a class="max_value" value="15000000" href="javascript:void(0)">15,000,000</a>
                              <a class="max_value" value="17500000" href="javascript:void(0)">17,500,000</a>
                              <a class="max_value" value="20000000" href="javascript:void(0)">20,000,000</a>
                              <a class="max_value" value="25000000" href="javascript:void(0)">25,000,000</a>
                              <a class="max_value" value="30000000" href="javascript:void(0)">30,000,000</a>
                              <a class="max_value" value="40000000" href="javascript:void(0)">40,000,000</a>
                              <a class="max_value" value="50000000" href="javascript:void(0)">50,000,000</a>
                              <a class="max_value" value="75000000" href="javascript:void(0)">75,000,000</a>
                              <a class="max_value" value="100000000" href="javascript:void(0)">100,000,000</a>


                            </div>



                          </div>
                        </div>
                        <br>
                        <br>

                        <div style="text-align: center;margin-top: 170px;margin-left: 35px;" class="col-md-10 btn-clear">
                          <a href="javascript:void(0)" class="price-reset-button">reset</a>
                        </div>

                      </div>


                    </div>
                  </div>
                </div>

我使用HTML / CSS和正确的Java验证代码制作了两个最低价格清单。

它应该像下面这样工作：

如果我选择一个最小值，那么所有小于该最小值的最大值都必须被禁用。

但是，此“禁用”功能不起作用。 如果我选择一个min_value，小于该min_value的max_values不会禁用。

任何帮助将不胜感激！