时间戳

首页 > 解决方案 > removeClass 也适用于下拉父级

javascript - removeClass 也适用于下拉父级

问题描述

感谢这里的所有贡献者和 w3schools，我终于完成了这项工作。

我有 2 个菜单 -Term和PayTerm. Term总是高于 PayTerm。默认disabled状态是完美的。当我单击 ; 中的任何值时，就会出现问题Term。下拉父级（其他 2）丢失了它的disabled标签，因此它变得可点击。我希望它保持禁用状态，直到Term' 值最接近PayTerm.

JSFiddle 演示

HTML

<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="k__form">
        <h2>Term</h2>
        <div id="term" class="btn-group btn-group-toggle d-flex" data-toggle="buttons">
          <label class="btn btn-secondary w-100 active">
                <input type="radio" name="options" value="10" id="option1" autocomplete="off"> 10
              </label>
          <label class="btn btn-secondary w-100">
                <input type="radio" name="options" value="15" id="option2" autocomplete="off"> 15
              </label>
          <label class="btn btn-secondary w-100">
                <input type="radio" name="options" value="20" id="option3" autocomplete="off"> 20
              </label>
          <div class="btn-group btn-dropdown w-100">
            <label class="btn btn-secondary w-100 dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  <input type="radio" class="" name="options" id="option4" autocomplete="off"> <span class="selection">Other 1</span> <span class="caret"></span>
                </label>
            <div class="dropdown-menu dropdown-menu-right">
              <label class="btn btn-secondary w-100">
                    <input type="radio" name="options" value="25" id="option3" autocomplete="off"> 25
                  </label>
              <label class="btn btn-secondary w-100">
                    <input type="radio" name="options" value="30" id="option3" autocomplete="off"> 30
                  </label>
              <label class="btn btn-secondary w-100">
                    <input type="radio" name="options" value="35" id="option3" autocomplete="off"> 35
                  </label>
              <label class="btn btn-secondary w-100">
                    <input type="radio" name="options" value="40" id="option3" autocomplete="off"> 40
                  </label>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12">
      <div class="k__form">
        <h2>Pay Term</h2>
        <div id="payterm" class="btn-group btn-group-toggle d-flex" data-toggle="buttons">
          <label class="btn btn-secondary w-100 active">
                <input type="radio" name="options"  value="5" id="option1" autocomplete="off"> 5
              </label>
          <label class="btn btn-secondary w-100 disabled">
                <input type="radio" name="options"  value="10" id="option2" autocomplete="off"> 10
              </label>
          <label class="btn btn-secondary w-100 disabled">
                <input type="radio" name="options"  value="15" id="option3" autocomplete="off"> 15
              </label>
          <div class="btn-group btn-dropdown w-100">
            <label class="btn btn-secondary w-100 dropdown-toggle disabled" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  <input type="radio" class="" name="options" id="option4" autocomplete="off"> <span class="selection">Other 2</span> <span class="caret"></span>
                </label>
            <div class="dropdown-menu dropdown-menu-right">
              <label class="btn btn-secondary w-100 disabled">
                    <input type="radio" name="options" value="20" id="option3" autocomplete="off"> 20
                  </label>
              <label class="btn btn-secondary w-100 disabled">
                    <input type="radio" name="options" value="25" id="option3" autocomplete="off"> 25
                  </label>
              <label class="btn btn-secondary w-100 disabled">
                    <input type="radio" name="options" value="30" id="option3" autocomplete="off"> 30
                  </label>
              <label class="btn btn-secondary w-100 disabled">
                    <input type="radio" name="options" value="35" id="option3" autocomplete="off"> 35
                  </label>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12">
      <p>&nbsp;</p>
      <div class="row">
        <div class="col-12">
          <div class="form-group">
            <input type="number" pattern="[0-9]*" id="adbr-rt" value="10" class="form-control" required>
            <label class="form-control-placeholder" for="adbr-rt">Term</label>
          </div>
        </div>
        <div class="col-12">
          <div class="form-group">
            <input type="number" pattern="[0-9]*" id="adbr-rpt" value="5" class="form-control" required>
            <label class="form-control-placeholder" for="adbr-rpt">Pay Term</label>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

JS：

$('#term :radio').on('change', function() {
  document.getElementById("adbr-rt").value = $(this).val();
  var baseValue = parseInt($(this).val());

  var option2List = $('#payterm :radio').filter(function() {
    return parseInt($(this).val()) >= baseValue; //getting only the values lesser to the current and equal to it
  });
  $('#payterm :radio').removeAttr('disabled'); //resetting the option2
  $('#payterm label').removeClass('disabled'); //resetting the labels 
  option2List.prop('disabled', 'disabled'); //disabling the lesser values
  $.each(option2List, function() {
    $(this).closest('label').addClass('disabled'); //add the disabled class to labesl  
  });
  $('#payterm :radio:enabled').first().click();
});
$('#payterm :radio').on('change', function() {
  document.getElementById("adbr-rpt").value = $(this).val();
});
$('#term label').on('click', function(e) {
  if ($(this).closest('.btn-group').is('.btn-dropdown')) {
    var selText = $(this).text();
    var x = $(this).closest('.btn-group').find('.selection').html(selText + ' <span class="caret"></span>');
    $(this).closest('.btn-group').find('.dropdown-toggle').addClass('activated');
  } else {
    $(this).closest('.btn-group').find('.dropdown-toggle').removeClass('activated');
  }
});
$('#payterm label').on('click', function(e) {
  if ($(this).closest('.btn-group').is('.btn-dropdown')) {
    var selText = $(this).text();
    var x = $(this).closest('.btn-group').find('.selection').html(selText + ' <span class="caret"></span>');
    $(this).closest('.btn-group').find('.dropdown-toggle').addClass('activated');
  } else {
    $(this).closest('.btn-group').find('.dropdown-toggle').removeClass('activated');
  }
});

标签： javascriptjquery

解决方案

在 "var option2List = $('#payterm :radio').filter(function() {" parseInt($(this).val()) 之后为 "Other2" 返回一个 NaN 所以 "parseInt($(this).val ()) >= baseValue" 返回 false

过去之后

var baseValue = parseInt($(this).val());

var v = 0;
var option2List = $('#payterm :radio').filter(function(i) {
if(i == 2){
  v = parseInt($(this).val());
}
return ((!parseInt($(this).val()) && (v != (baseValue+5 && baseValue-5)) )  ? true : 
          parseInt($(this).val()) >= baseValue);

推荐阅读