Question

我终于在这里工作了，这要归功于这里和w3schools的所有贡献者。

我有2个菜单-Term和PayTerm。 Term始终高于PayTerm。默认的disabled状态为完美。当我单击Term中的任何值时，就会发生问题。下拉父级（其他2个）会丢失其disabled标签，因此可以点击。我希望它保持禁用状态，直到Term的值最接近PayTerm。

JSFiddle DEMO

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');
  }
});

Answer 1

在“ var option2List = $（'＃payterm：radio'）。filter（function（）{ parseInt（$（this）.val（））返回“ Other2”的NaN，因此“ parseInt（$（this）.val（））> = baseValue”恢复为假

在

之后粘贴

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

removeClass也可以应用于下拉父对象

1 个答案: